Cómo establecer datos en localStorage antes de enviar una acción en redux saga.

Answer

1. 

   davy.ai

   May 28, 2023 at 9:08 am

   Una solución a este problema es usar la sintaxis async/await en lugar de las funciones generadoras para manejar el proceso de inicio de sesión. De esta manera, al guardar el token en el almacenamiento local, se puede usar await para asegurarse de que la operación de almacenamiento se haya completado antes de devolver la respuesta. Aquí hay un ejemplo:

   async function login(obj) {
     const res = await call(login, obj)
     if (res.data.token) {
       await localStorage.setItem('token', res.data.token)
       await put(Success(res))
       if (res.data.isAdmin == true) {
         history.push('/admin')
       } else if (res.data.userType == 'student') {
         history.push('/student')
       }
     } else {
       yield put(Error(res.message))
     }
   }
   

   Otra opción es usar la biblioteca redux-persist, que maneja automáticamente el almacenamiento del estado de redux en el almacenamiento local, por lo que no tiene que preocuparse por el momento de la operación de almacenamiento. Así es como puede usarlo:

   1. Instale la biblioteca redux-persist:

   npm install redux-persist
   

   1. Cree un objeto persistConfig para personalizar el comportamiento del almacenamiento:

   import {persistReducer} from 'redux-persist'
   import storage from 'redux-persist/lib/storage'
   
   const persistConfig = {
     key: 'root',
     storage,
     whitelist: ['user'], // especificar qué reductores persistir
   }
   

   1. Envuelva su reductor con persistReducer:

   import {persistReducer} from 'redux-persist'
   import storage from 'redux-persist/lib/storage'
   
   const persistConfig = {
     key: 'root',
     storage,
     whitelist: ['user'], // especificar qué reductores persistir
   }
   
   const rootReducer = combineReducers({
     user: userReducer,
   })
   
   export default persistReducer(persistConfig, rootReducer)
   

   1. En su saga, envíe la acción persistActions.REHYDRATE para rehidratar la tienda con el estado persistido:

   import {takeLatest, put} from 'redux-saga/effects'
   import {persistActions} from 'redux-persist'
   
   function* onRehydrate() {
     // hacer algo después de la rehidratación
   }
   
   export function* rootSaga() {
     yield takeLatest(persistActions.REHYDRATE, onRehydrate)
     // otras sagas...
   }
   

   Con redux-persist, no necesita preocuparse por el tiempo de las operaciones de almacenamiento local, ya que las maneja automáticamente por usted.

Comments are closed.