修改 react-boilerplate 以在 store 的单个键下嵌套注入的 reducer

Question

react-boilerplate 有一个实用程序 injectReducer，用于允许减速器异步附加到 store，并在整个应用程序的 reducers.js 文件中, createReducer 将这些 injectedReducers 展开到状态中，这样你就有了如下的状态形状：

{
  route: routeReducer,
  language: languageProviderReducer,
  container1: container1Reducer,
  container2: container2Reducer,
  container3: container3Reducer,
}

我想将这些特定于容器的 reducer 分散到全局状态的子项中，如下所示：

{
  route: routeReducer,
  language: languageProviderReducer,
  ui: {
    container1: container1Reducer,
    container2: container2Reducer,
    container3: container3Reducer,
  }
}

我天真地试图修改 reducers.js 方法 createReducer 像这样：

export default function createReducer(injectedReducers) {
  return combineReducers({
    route: routeReducer,
    language: languageProviderReducer,
    ui: (injectedReducers) ? combineReducers(injectedReducers) : ((state = {}) => state),
  });
}

或者也许：

export default function createReducer(injectedReducers) {
  return combineReducers({
    route: routeReducer,
    language: languageProviderReducer,
    ui: combineReducers(injectedReducers || {}),
  });
}

但是现在当我尝试加载任何容器时，我得到一个错误：TypeError: Cannot read property '_currentElement' of null。

使用注入的减速器和 react-boilerplate 实现我想要的那种状态形状的最简单途径是什么？

Answer 1

我认为对我来说关键是只在需要时添加 ui 键（当至少存在一个 injectedReducers 时）。

/**
 * Creates the main reducer with the dynamically injected ones
 */
export default function createReducer(injectedReducers) {
  const reducersToCombine = {
    form: formReducer,
    language: languageProviderReducer,
    route: routeReducer,
  };

  if (injectedReducers && Object.keys(injectedReducers).length > 0) {
    reducersToCombine.ui = combineReducers(injectedReducers);
  }

  return combineReducers(reducersToCombine);
}

修改 react-boilerplate 以在 store 的单个键下嵌套注入的 reducer

Modify react-boilerplate to nest injected reducers under a single key of the store

javascript

reactjs

redux

react-boilerplate