我有我的应用程序（一个很少，我自己的功能boilterplate）。它有一个全球性存储（内置的，从样板出来），它看起来像：将两个商店混合成一个共同的商店 - ReactJS

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; 
}

前几天我已经实现了一个终极版形式（它的伟大工程），但不幸的是，有一个自己的，当地的商店，这是不compatibile与全球性的，看起来像：

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;

据我所知，店里已经是全球性的 - 第一个是，但第二个（for redux形式）不是。

我想问你

如何将这两个店混合到一个单一的，共同的，全球性的？

谢谢任何答案！

编辑：终极版形式还有：https://codesandbox.io/s/qx95rm7gG

阵营终极版来源于：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)

来源

2017-05-25 H. Doe

我认为你的意思是一个本地'国家'而不是本地'商店'。 –

@ Sag1v我对React有点新鲜，如果你能提供一些完整的答案，如果你知道如何解决我的问题，我会努力通过这个几天... –

你没有具体说明什么不适合你以及上面的代码，很难看到大图，没有文件名或层次结构等。如果你将一个小例子的代码上传到github，我想你会得到一个很好的和快速的回复。 –

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

这是不正确的。减速机减速机与其他减速机一样是标准减速机，只需与减速机组合即可（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我可以让这个答案更具体。

来源

2017-05-27 04:01:42

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

我想问你

回答

相关问题