Soy muy nuevo en React & Redux y estoy trabajando en la parte de autenticación de mi aplicación.
La forma en que funciona mi API de backend es que, una vez que un usuario inicia sesión, la respuesta contiene:
Lo que me gustaría hacer es que ocurra lo siguiente:
localstorageisAuthenticated en Redux en true ( false para cerrar sesión)userActualmente tengo la siguiente acción :
import { SIGN_IN, SIGN_OUT } from "./Types"; export const signIn = response => { return { type: SIGN_IN, payload: response }; } export const signOut = () => { return { type: SIGN_OUT }; }y el siguiente Reductor :
import { SIGN_IN, SIGN_OUT } from './Types'; const INITIAL_STATE = { isAuthenticated: null, user: {} }; const authReducer = (state = INITIAL_STATE, action) => { switch(action.type) { case SIGN_IN: // This logic was removed thanks to comment from Sanish Joseph // localStorage.setItem("token", action.payload.token); return {...state, isAuthenticated: true, user: action.payload.user}; case SIGN_OUT: // This logic was removed thanks to comment from Sanish Joseph // localStorage.removeItem("token"); return {...state, isAuthenticated: false, user: {}}; default: return state; }; }; export default authReducer;y el código CombineReducers :
export default combineReducers({ ... auth: authReducer }); Este código funciona, pero tanto user como isAuthenticated son hijos de auth (en otras palabras, tengo que obtenerlos y referirme a ellos a través de auth.user & auth.isAuthenticated .
Lo que no sé cómo hacer es cómo escribir mi código reductor para que SIGN_IN aún envíe todos los datos que obtuve de la API, pero pueda crear 2 partes separadas de estado en Redux isAuthenticated & user .
¡Cualquier ayuda sería realmente apreciada!
Entonces, lo que entendí de la pregunta es que desea hacer que sea Autenticado y usuario como 2 partes separadas en la tienda.
Para separar el estado en varias partes, necesitará varios reductores. Otra lógica importante para recordar es que todos sus reductores serán llamados cuando se envíe cualquier acción. Es su decisión si manejar una acción en particular o no. Múltiples reductores pueden manejar la misma acción.
Entonces, para crear 2 partes, una para auth y otra para user , puede crear 2 reductores. Elimine el manejo del usuario del reductor de autenticación y agréguelo al reductor de usuario. La acción va a ser la misma. Así que en el reductor de autenticación,
import { SIGN_IN, SIGN_OUT } from './Types'; const INITIAL_STATE = { isAuthenticated: null, }; const authReducer = (state = INITIAL_STATE, action) => { switch(action.type) { case SIGN_IN: return {...state, isAuthenticated: true}; case SIGN_OUT: return {...state, isAuthenticated: false}; default: return state; }; }; export default authReducer;y su reductor de usuario se verá así,
import { SIGN_IN, SIGN_OUT } from './Types'; const INITIAL_STATE = { user: {} }; const userReducer = (state = INITIAL_STATE, action) => { switch(action.type) { case SIGN_IN: return {...state, user: action.payload.user}; case SIGN_OUT: return {...state, user: {}}; default: return state; }; }; export default userReducer;y no olvides combinarlos,
export default combineReducers({ ... auth: authReducer, user:userReducer });