店舗初期化後にredux reducersを更新する

Question

私はreduxアーキテクチャの新機能ですが、combinedReducerとcreateStoreメソッドを使用して店舗を作成した後に、この基本的な疑問を減らすことができますか？

Answer 1

はい、Reduce storeのreplaceReducer apiと非同期に新しいレシピエントを注入して注入することができます。

これは高度なAPIです。あなたのアプリがコード を分割して実装していて、いくつかのレデューサーを動的にロードしたい場合、これが必要になるかもしれません。 Reduxのホットリロード機構を実装する場合は、 も必要です。 createStore.js fileでこのstarter-kit

がreducerscreateStoreメソッドに引数として渡された例として

TakeはmakeRootReducers()の結果です。この機能に非同期減速器が渡されていないことに注意してください。 reducers.js fileで

// extract of src/store/createStore.js 

import { applyMiddleware, compose, createStore } from 'redux' 
import { routerMiddleware } from 'react-router-redux' 
import thunk from 'redux-thunk' 
import makeRootReducer from './reducers' 


export default (initialState = {}, history) => { 

// ... 

    // ====================================================== 
    // Store Instantiation and HMR Setup 
    // ====================================================== 
    const store = createStore(
    makeRootReducer(), // <------------- without arguments, it returns only the synchronously reducers 
    initialState, 
    compose(
     applyMiddleware(...middleware), 
     ...enhancers 
    ) 
) 
    store.asyncReducers = {} 

    // ... 
    } 

：

• makeRootReducer機能は、デフォルトのスタートアップ（のようなrouter減速）するために必要な減速 と引数
• injectReducerとして渡された他の "非同期" リデューサーでcombineReducersを呼び出す関数であります実行時に新しいレデューサーを注入することを求めていました。これは、引数として減速の新しいリストを渡して店にreplaceReducer APIを呼び出すmakeRootReducer(async)機能を通じて入手

は、以下を参照してください：

最後に

// src/store/reducers.js 
import { combineReducers } from 'redux' 
import { routerReducer as router } from 'react-router-redux' 

export const makeRootReducer = (asyncReducers) => { 
    return combineReducers({ 
    // Add sync reducers here 
    router, 
    ...asyncReducers 
    }) 
} 

export const injectReducer = (store, { key, reducer }) => { 
    store.asyncReducers[key] = reducer 
    store.replaceReducer(makeRootReducer(store.asyncReducers)) 
} 

export default makeRootReducer 

、スターター・キットに減速がルート定義に注入され、ここのように：

このテクニックは、大きなアプリを分割し、すべてのレデューサーをブート時に読み込まないようにする場合に役立ちます。