Question

0

128

Views

¿Cómo transformar un estado Redux en Redux Persist usando 'combineReducers'?

Intento transformar mi estado Redux en Redux-Persist pero no sé cómo escribir el código porque uso combineReducers.

Así es como se ve mi tienda:

 import { createStore, combineReducers } from 'redux' import { usersReducer } from './users'; import { eventsReducer } from './events'; export const store = createStore(combineReducers({ users: usersReducer, events: eventsReducer }));

Y así es como se ve una tienda:

 const initialState = { loggedIn: false, thisUser: [] } export function usersReducer(state = initialState, action) { switch (action.type) { case 'users/loggedIn': return { ...state, loggedIn: action.payload } case 'users/addUser': return { ...state, thisUser: action.payload[0] } case 'users/setActivated': return { ...state, thisUser: { ...state.thisUser, activated: action.payload } } case 'clearAll': return { thisUser: [] } default: return state } }

¿Puede alguien ayudarme, por favor?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T22:15:49.133Z

Simplemente puede realizar cambios en su código en store.js .

Requisito previo

Instale @reduxjs/toolkit

usando npm : npm install @reduxjs/toolkit
usando hilo : yarn add @reduxjs/toolkit

Instalar el paquete redux-persist

usando npm : npm install redux-persist
usando hilo : yarn add redux-persist

Cambios a realizar en el archivo `store.js`

1. Persistir todos los reductores

 import { combineReducers } from 'redux' import { configureStore } from '@reduxjs/toolkit' import { usersReducer } from './users'; import { eventsReducer } from './events'; import { FLUSH, PAUSE, PERSIST, persistReducer, PURGE, REGISTER, REHYDRATE } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; // combine all reducers const reducers = combineReducers({ users: usersReducer, events: eventsReducer }) export const store = configureStore({ reducer: persistReducer( { key: 'root', storage }, reducers ), middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER] } }) })

3. Persistir solo en ciertos reductores

 import { combineReducers } from 'redux' import { configureStore } from '@reduxjs/toolkit' import { usersReducer } from './users'; import { eventsReducer } from './events'; import { FLUSH, PAUSE, PERSIST, persistReducer, PURGE, REGISTER, REHYDRATE } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; // combine all reducers const reducers = combineReducers({ users: persistReducer( { key: 'users', storage }, usersReducer ), events: eventsReducer }) export const store = configureStore({ reducer: reducers, middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER] } }) })

Aquí están las referencias:

0

128