【问题标题】：Mixing two stores into single, common one - ReactJS将两个商店混合成一个共同的商店 - ReactJS
【发布时间】：2017-05-25 08:19:43
【问题描述】：

我有我的应用程序（我自己的功能很少的样板）。它有一个全局存储（内置，来自样板文件），如下所示：

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'; //combine reducers from redux form
import { fromJS } from 'immutable';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';
import { reducer as reduxFormReducer } from 'redux-form'; //registration form


const sagaMiddleware = createSagaMiddleware();

export default function configureStore(initialState = {}, history) {
  // Create the store with two middlewares
  // 1. sagaMiddleware: Makes redux-sagas work
  // 2. routerMiddleware: Syncs the location/URL path to the state
  const middlewares = [
    sagaMiddleware,
    routerMiddleware(history),
  ];

  const enhancers = [
    applyMiddleware(...middlewares),
  ];

  // If Redux DevTools Extension is installed use it, otherwise use Redux compose
  /* eslint-disable no-underscore-dangle */
  const composeEnhancers =
    process.env.NODE_ENV !== 'production' &&
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
  /* eslint-enable */

  const store = createStore(
    createReducer(),
    fromJS(initialState),
    composeEnhancers(...enhancers)
  );

  // Extensions
  store.runSaga = sagaMiddleware.run;
  store.asyncReducers = {}; // Async reducer registry

  // Make reducers hot reloadable, see http://mxs.is/googmo
  /* istanbul ignore next */
  if (module.hot) {
    module.hot.accept('./reducers', () => {
      import('./reducers').then((reducerModule) => {
        const createReducers = reducerModule.default;
        const nextReducers = createReducers(store.asyncReducers);

        store.replaceReducer(nextReducers);
      });
    });
  }

  return store;
}

几天前，我实现了一个 redux-form（效果很好），但不幸的是，它有一个自己的本地商店，与全局商店不兼容，看起来像：

import { createStore, combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form';

const reducer = combineReducers({
  form: reduxFormReducer
});
const store = (window.devToolsExtension
  ? window.devToolsExtension()(createStore)
  : createStore)(reducer);

export default store;

据我所知，商店必须是全球性的——第一个是全球性的，但第二个（对于 redux 形式）不是。

我想问你

如何将这两个商店混合成一个通用的全球商店？

感谢您的任何回答！

编辑：Redux 表单来自：https://codesandbox.io/s/qx95rm7gG

React redux 来自：https://github.com/react-boilerplate/react-boilerplate

Edit2：文件层次结构：

-app
--index.js
--store.js (first one, global)
--containers
---UserRegistration
----index.js
----store.js (the second one, local)

【问题讨论】：

我认为您的意思是本地 state 而不是本地 store。
@Sag1v 我对 React 有点陌生，如果你知道如何解决我的问题，如果你能提供一些完整的答案，那就太好了，这几天我一直在努力解决这个问题......
你没有具体说明什么不适合你，从上面的代码中很难看到全局，没有文件名或层次结构等。我认为你会得到一个好的和快速的如果您也将代码的小示例上传到 github，请回复。
在最好的情况下，您不应该使用嵌套存储，并在基本存储中执行组合减速器。在这种情况下，所有 reducer 函数将由关联对象中的 reducers 组名称分隔。不要忘记在套接字的情况下检查它，io 用于 saga 中的收入事件提供程序。

标签： javascript reactjs redux redux-form

【解决方案1】：

但不幸的是，它有自己的本地商店，与全球商店不兼容，看起来像

这是不正确的。 redux-form reducer 是一个标准的 reducer，与任何其他 reducer 一样，只需将其组合到您的 reducer 中（来自import createReducer from './reducers';）。

如果您已经在 createReducer 中组合减速器（我假设您是因为热重载中的 store.asyncReducers），那么您只需要包含 reduxFormReducer 和 form 作为键，例如：

import { combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form';
import someReducer from './someReducer';
import someOtherReducer from './someOtherReducer';

export default function createReducer(asyncReducers = {}) {

  return combineReducers({
    form: reduxFormReducer,
    someReducer,
    someOtherReducer,
    ...asyncReducers
  });

}

如果你分享./reducers/index.js，我可以让这个答案更具体。

【讨论】：