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?update redux reducers nach store initialization
Antwort
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 aufruftcombineReducers
mit den Standard-Reduzierer für die Inbetriebnahme benötigt (wierouter
Minderer) und andere "asynchron" als Argumente übergeben ReduzierungeninjectReducer
ist eine Funktion aufgerufen, neue Reducer zur Laufzeit zu injizieren. Es ruftreplaceReducer
api auf dem Speicher als Argument erhalten durchmakeRootReducer(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.
Danke für die Lösung, es hat das Problem behoben. –
@Sibeshkumar froh, dass es dir hilft! – NickGnd