我想问你

Question

我有我的应用程序（一个很少，我自己的功能的boilterplate）。它有一个全局存储（内置，来自样板），看起来像：

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)

Answer 1

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

这不正确。 redux-form reducer是一种标准的减速器，只需要与你的减速器结合使用（来自import createReducer from './reducers';）。

如果您已经在createReducer中组合缩减器（我假设您是因为热重新加载中的store.asyncReducers），那么您只需要将reduxFormReducer与{{1}一起包含密钥，如：

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 }); }，我可以更具体地回答这个问题。

将两个商店混合成一个共同的商店 - ReactJS

我想问你

1 个答案: