将两个存储混合成一个，常见的存储 - ReactJS

Question

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

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 表单(效果很好(，但不幸的是它有自己的本地存储，它与全局存储不兼容，看起来像：

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

编辑2：文件层次结构：

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

Answer 1

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

这是不正确的。 redux-form减速器与其他任何减速器一样是标准减速器，只需要组合到您的减速器中(从import createReducer from './reducers';开始(。

如果您已经在 createReducer 中组合了化简器(我假设您是因为热重载中的store.asyncReducers(，那么您只需要包含以 form 作为键的reduxFormReducer，如下所示：

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我可以更具体地回答这个答案。