javascript - 从 Redux 中的多个位置在中间件中添加 reducer

Question

我使用 Create React App 生成了一个项目，然后添加了 Redux。

然后，redux 状态被分成三个部分，每个部分都有自己的 reducer 和定义的一些中间件。 reducer 位于名为 part1.js part2.js part3.js 的文件中，然后是一个 common.js 从 part1-2-3.js 导入 reducer 和中间件并将它们添加到 combineReducer 和 applyMiddeware 的文件。

我的问题是，是否有办法不必将所有内容导入到一个地方。我想要的是能够从 part1-2-3.js 中将 reducer 和 middeware 添加到 comineReducer 和 applyMiddleware ，原因是的目的是删除 common.js 中显式的通用样板代码文件。这是可能的还是将所有内容导入到一个地方的唯一方法？

更新

我现在有关于如何解决combineReducer部分的很好的例子，但是我仍然需要为applyMiddleware做类似的事情。我从 following repo 找到了一个例子关于如何使用 applyMiddleware 执行类似的操作。然而它是用 TypeScript 编写的，我很难将其翻译成在 JS React/Redux 应用程序中运行的最小方法。如果有一些例子就太好了。

更新

所以我终于找到了this最小的库做我想做的事。

Answer 1

是的!我有一个与此 reducer 管理器类似(几乎相同)的 reducer 注册表:https://redux.js.org/recipes/code-splitting#using-a-reducer-manager :

const DEFAULT_REDUCER = state => state || null;

export class ReducerRegistry {
  constructor() {
    this._emitChange = null;

    this._reducers = {};
  }

  getReducers() {
    // default reducer so redux doesn't complain
    // if no reducers have been registered on startup
    if (!Object.keys(this._reducers).length) {
      return { __: { reducer: DEFAULT_REDUCER } };
    }

    return { ...this._reducers };
  }

  register(name, reducer, options = {}) {
    if (this._reducers.name && this._reducers.name !== reducer) {
      throw new Error(`${name} has already been registered`);
    }

    this._reducers = { ...this._reducers, [name]: { reducer, options } };
    if (this._emitChange) {
      this._emitChange(this.getReducers());
    }
  }

  setChangeListener(listener) {
    this._emitChange = listener;
  }
}

const reducerRegistry = new ReducerRegistry();
export default reducerRegistry;

然后我将 redux 域组织到像 reducks-style: https://github.com/alexnm/re-ducks 这样的文件夹中

在reducks域的index.js中，我导入reducer注册表并注册reducer:

import Domain from './name';
import reducer from './reducer';

import { reducerRegistry } from '...wherever';
reducerRegistry.register(Domain, reducer); // register your reducer

export { ... whatever }

最后，我的store使用像这样的reducer注册表:

export const store = createStore(
  combine(reducerRegistry.getReducers()),
  initialState,
  composeEnhancers(applyMiddleware(...middlewares))
);

// Replace the reducer whenever a new reducer is registered (or unregistered).!!!!
// THIS IS THE MAGIC SAUCE!
reducerRegistry.setChangeListener(reducers =>
  store.replaceReducer(combine(reducers))
);

export default store;

这个设置对我们来说非常有效。允许我们将所有 redux 逻辑与应用程序的其余部分(以及其他 redux 域逻辑!)保持非常隔离，对于代码分割非常有用。强烈推荐。