update redux reducers nach store initialization

Question

Ich bin neu in Redux-Architektur, ich habe diese grundlegenden Zweifel können wir aktualisieren die Reducer-Liste nach dem Erstellen des Speichers mit combinedReducer und createStore-Methoden?

Answer 1

Ja, Sie können die Reduzierungen aktualisieren und eine neue asynchron mit replaceReducer api von Redux store injizieren.

Es ist eine erweiterte API. Möglicherweise benötigen Sie dies, wenn Ihre Anwendung den Code splitting implementiert und Sie einige der Reduzierungen dynamisch laden möchten. Sie benötigen möglicherweise auch, wenn Sie einen Hot-Reload-Mechanismus für Redux implementieren.

Nehmen wir als Beispiel das starter-kit

In createStore.js file die reducers als Argumente an die Methode übergeben createStore sind das Ergebnis von makeRootReducers(). Achten Sie darauf, dass für diese Funktion kein Async-Reduzierer vorhanden ist.

// 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 = {} 

    // ... 
    } 

In reducers.js file:

• makeRootReducer Funktion aufruft combineReducers mit den Standard-Reduzierer für die Inbetriebnahme benötigt (wie router Minderer) und andere "asynchron" als Argumente übergeben Reduzierungen
• injectReducer ist eine Funktion aufgerufen, neue Reducer zur Laufzeit zu injizieren. Es ruft replaceReducer api auf dem Speicher als Argument erhalten durch makeRootReducer(async) Funktion

siehe unten eine neue Liste von Reduzierungen vorbei:

// 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 

schließlich im Starter-Kit der Minderer auf Routendefinition eingespritzt wird, hier wie:

// src/routes/Counter/index.js 
import { injectReducer } from '../../store/reducers' 

export default (store) => ({ 
    path: 'counter', 
    /* Async getComponent is only invoked when route matches */ 
    getComponent (nextState, cb) { 
    /* Webpack - use 'require.ensure' to create a split point 
     and embed an async module loader (jsonp) when bundling */ 
    require.ensure([], (require) => { 
     /* Webpack - use require callback to define 
      dependencies for bundling */ 
     const Counter = require('./containers/CounterContainer').default 
     const reducer = require('./modules/counter').default 

     /* ----> HERE <---- */ 
     /* Add the reducer to the store on key 'counter' */ 
     injectReducer(store, { key: 'counter', reducer }) // <------- 

     /* Return getComponent */ 
     cb(null, Counter) 

    /* Webpack named bundle */ 
    }, 'counter') 
    } 

Diese Technik ist hilfreich, wenn Sie eine große App teilen mögen und vermeiden Sie alle Reduzierungen an dem Boot zu laden.