He configurado redux-persist con una configuración tradicional de react-redux como esta:
onst persistConfig = { key: 'root', storage, whitelist: ['todos'], }; const persistedReducer = persistReducer(persistConfig, reducer); const store = createStore( persistedReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); const persistor = persistStore(store); // wrapper const StateProvider = ({ children }) => { return ( <Provider store={store}> <PersistGate loading={<div>Loading...</div>} persistor={persistor}> {children} </PersistGate> </Provider> ); };Pero, ¿cómo puedo configurarlo con redux-toolkit? Hasta ahora he probado esto:
const persistedReducer = persistReducer(persistConfig, todoreducer); const store = configureStore({ reducer: { todos: persistedReducer, }, }); const persistor = persistStore(store); // wrapper const StateProvider = ({ children }) => { return ( <Provider store={store}> <PersistGate loading={<div>Loading...</div>} persistor={persistor}> {children} </PersistGate> </Provider> ); }; Pero no está funcionando. No puedo obtener todos por const todos = useSelector(state => state.todos);
devuelve indefinido.
Ahora hay una guía en los documentos de Redux Toolkit que lo ayudará con esto, además de brindarle consejos para purgar el estado persistente y trabajar con RTK Query .
También tiene un código que querrá copiar y pegar para ignorar los tipos de acción de los despachos react-persist . Esto evitará que arroje mensajes de error (Recibí el error A non-serializable value was detected in an action, in the path: `register`. cuando ejecuté mi aplicación React Native con Expo).
Al momento de escribir, su ejemplo de código se ve así:
import { configureStore } from '@reduxjs/toolkit' import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, } from 'redux-persist' import storage from 'redux-persist/lib/storage' import { PersistGate } from 'redux-persist/integration/react' import App from './App' import rootReducer from './reducers' const persistConfig = { key: 'root', version: 1, storage, } const persistedReducer = persistReducer(persistConfig, rootReducer) const store = configureStore({ reducer: persistedReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }), }) let persistor = persistStore(store) ReactDOM.render( <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <App /> </PersistGate> </Provider>, document.getElementById('root') )tienda.js
import {configureStore} from '@reduxjs/toolkit'; import storage from 'redux-persist/lib/storage' import {combineReducers} from "redux"; import { persistReducer } from 'redux-persist' import thunk from 'redux-thunk' const reducers = combineReducers({ //... }); const persistConfig = { key: 'root', storage }; const persistedReducer = persistReducer(persistConfig, reducers); const store = configureStore({ reducer: persistedReducer, devTools: process.env.NODE_ENV !== 'production', middleware: [thunk] }); export default store;Índice/Aplicación.js
import store from './app/store'; import { PersistGate } from 'redux-persist/integration/react' import { persistStore } from 'redux-persist' let persistor = persistStore(store); <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <App/> </PersistGate> </Provider>,Acabo de probar esto con una configuración exactamente similar y parece funcionar. Si es útil, estoy en "@reduxjs/toolkit": "^1.4.0", , "redux-persist": "^6.0.0" y "react-redux": "^7.2.1" . HH.