我有我的應用程序（一個很少，我自己的功能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

我想問你

回答

相關問題