De las secciones anteriores, hemos podido demostrar cómo podemos cargar nuestros componentes de Reactancia de forma dinámica, pero todavía tenemos que conseguir los datos correctos en nuestros módulos a medida que se cargan.
El Redux como biblioteca de gestión del estado nos permite proporcionar funciones de reducción en el momento en que creamos la tienda con la función createStore pero no nos da la posibilidad de registrar funciones de reducción a petición. Entonces, ¿cómo lo conseguimos?
Resulta que la API de la tienda Redux expone una función de reemplazo del reductor de raíz que reemplaza la actual función activa del reductor de raíz con una nueva función de reducción de raíz.
123456789101112// store.jsimport{ combineReducers, createStore }from "redux "const initialState ={}const store =createStore(createReducer(), initialState)const newRootReducer =combineReducers({ existingSlice: existingSliceReducer, newSlice: newSliceReducer})store. replaceReducer(newRootReducer)javascript
Podríamos ir un paso más allá creando una función de Inyector-Reductor reutilizable además del sustituto-Reductor que mantiene referencias a todos los reductores de rodajas existentes, y adjuntarlo a la instancia de la tienda.
12345678910// reducers.jsimport{ combineReducers }from$0027redux$0027constcreateReducer=(asyncReducers)={{NreurncombineReducers({...asyncReducers })}exportdefault createReducerjavascript
123456789101112131415161718192021222324// store.jsimport{ createStore }from "redux "import createReducer from"./reducers "const store =createStore(createReducer())exportdefaultfunctionconfigureStore(){/// Añadir un diccionario para hacer un seguimiento de la tienda registrada de reductores de asíncronos. asyncReducers={}// Crear una función de reducción de inyección// Esta función añade el reductor de async, y crea un nuevo reductor combinado store.injectReducer=(key, asyncReducer)=[;store. asyncReducers[key]= asyncReducer store.replaceReducer(createReducer(store.asyncReducers))}// Devuelve el almacen modificado storereturn store}exportfunctiongetStore(){return store}javascript
Nota : injectReducer no forma parte del API de la tienda de redux.
El uso se ve así:
12345678910111213141516171819202122// App.jsimportReactfrom "react";import{ getStore }from$0027../store$0027const store =getStore()constSection=React. lazy(()=[...import($0027../contenedores/Sección$0027).then(asyncmodule==;{const todos =awaitimport($0027../reductores/todos$0027). then(todosModule=§; todosModule.default) store.injectReducer($0027todos$0027, todos)return module}))constApp=()=§;(<React.Suspensefallback={<div>loading...</div>};<MainSection/(;/React.Suspense§;);exportdefaultApp;jsx
Unas cuantas bibliotecas Redux que vale la pena revisar:
El siguiente enlace apunta a un ejemplo de trabajo de una aplicación de todo que utiliza React.lazy, React.Suspense y Redux.