为一个大项目迁移到 redux-toolkit

Question

我有一个包含庞大代码库的反应项目。 我正在使用 redux、sagas 和异步减速器。 我有一个 redux-module 结构。 有很多小的减速器，我将它们组合成几个大的异步减速器。 sagas 的情况也一样。

是否可以逐步迁移到redux-toolkit和rtk-query？ 我不能一次重写所有模块。 也许有人有做同样迁移的经验？ 或者我应该保留我的样板代码库？）

这是异步 redux 模块之一的代码

const reducer: (state: UserState, action: UserAction) => UserState = mergeReducers(
  userReducer,
  settingsReducer,
  signUpReducer
);

mergeReducers function

const mergeReducers =
  (...reducers) =>
  (state, action) =>
    reducers.reduce((acc, reducer) => ({ ...acc, ...reducer(acc, action) }), state);

所有这些减速器都是标准减速器，例如

const signUpReducer = (state: UserState = userInitialState, action: SignUpAction): UserState => {
  switch (action.type) {
    case SIGN_UP_CONTINUE_REQUESTED:
    case SIGN_UP_INITIATE_REQUESTED:
      return { ...state, pending: true, error: null };
    case SIGN_UP_INITIATE_SUCCEEDED:
      return { ...state, pending: false };
    case SIGN_UP_CONTINUE_SUCCEEDED:
      return {
        ...state,
        profile: action.payload.profile,
        token: action.payload.token,
        error: null,
      };
    case SIGN_UP_INITIATE_REJECTED:
    case SIGN_UP_CONTINUE_REJECTED:
      return { ...state, pending: false, error: action.payload };

    default: {
      /* ::(action.type: empty) */
      return { ...state };
    }
  }
};

模块的实现在这里

function startSaga(key, saga) {
  const runnableSaga = function* main() {
    const sagaTask = yield fork(saga);
    const { payload } = yield take(STOP_SAGA);

    if (payload === key) {
      yield cancel(sagaTask);
    }
  };

  sagaMiddleware.run(runnableSaga);
}

function stopSaga(key) {
  store.dispatch({
    payload: key,
    type: STOP_SAGA,
  });
}

export const useReduxModule = (key, reducer, saga, initialAction) => {
  useEffect(() => {
    if (!store.asyncReducers[key]) {
      store.injectReducer(key, reducer);
      startSaga(key, saga);
      if (initialAction) initialAction();
    }

    return () => {
      stopSaga(key);
      store.removeReducer(key);
    };
  }, []);
};

反应中的用法。 我需要在模块根组件中初始化 redux 模块

import { loadSomeDateRequested, reducer, saga } from './store';

const SomeComponent = ({ loadData }) => {
  useReduxModule(SOME_MODULE, reducer, saga, loadData);

  return (
    // some jsx
  );
};

export default connect(null, {
  loadData: loadSomeDateRequested,
})(SomeComponent);

SomeComponent.propTypes = {
  loadData: func.isRequired,
};

存储配置

function createReducer(asyncReducers) {
  return combineReducers({
    ...staticReducers,
    ...asyncReducers,
  });
}

export const sagaMiddleware = createSagaMiddleware();

const bindMiddleware = (middlewares) =>
  (process.env.NODE_ENV !== 'production' && composeWithDevTools(applyMiddleware(...middlewares))) ||
  applyMiddleware(...middlewares);

export default function configureStore() {
  const store = createStore(createReducer(), bindMiddleware([sagaMiddleware]));
  store.asyncReducers = {};
  store.injectReducer = (key, asyncReducer) => {
    store.asyncReducers[key] = asyncReducer;
    store.replaceReducer(createReducer(store.asyncReducers));
  };
  store.removeReducer = (key) => {
    delete store.asyncReducers[key];
    delete store.getState()[key];
  };
  return store;
}

export const store = configureStore();

Static减速机是

export default {
  [MODULE_PDF_MODAL]: pdfModalReducer,
};

我花了很多时间研究和阅读文档和示例。 但是我没有找到实际项目的迁移示例，只有如何迁移最简单的 redux 存储的示例。 也许有人知道如何添加 redux 工具包并保持现有商店正常工作。 因为目前，我只知道一种解决方案。 而这个解决方案是一次性重写所有的redux store。 正如我在上面写的那样，我有一些异步模块，它们彼此独立。 按模块迁移是现实的，但我需要保留所有其他的工作，然后再重写它们。

非常感谢您的所有回答。 希望可以有人帮帮我）

Answer 1

Redux 工具包只是 Redux。 由createSlice或createReducer创建的 RTK reducer 与“外部”没有什么不同，与您手工编写的 reducer 没有什么不同。 这意味着您可以对它们做任何您想做的事情，甚至可以将它们放入您的mergeReducers中。

我们的建议：将您的createStore切换到configureStore 。 这已经添加了一些辅助中间件，您的整个商店都将从中受益——不变性和可序列化检查等等。 然后只需将您慢慢使用的减速器切换到 RTK - 反正就是您需要触摸的那些。 随着时间的推移，您的项目将会迁移。

至于去 RTK Query - 那只是范式的改变。 当然，随着时间的推移，你也可以这样做，但 reducer+saga 和 hooks+RTKQ 之间并没有太多相似之处——你必须自己决定如何处理。