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

Question

react-boilerplate 有一个实用程序injectReducer，用于允许reducer 异步附加到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。

使用注入的 reducer 和 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);
}