Estoy usando redux en un proyecto y quiero hacer un useSelector que verifique si los valores en el estado redux son los valores predeterminados; de lo contrario, hará una solicitud a la base de datos y actualizará el estado que siento que es. Sin embargo, es bastante complicado y me está costando entender cómo necesito hacer esto. Necesito hacer esto porque a veces el estado correcto no se carga en el estado en el que estoy considerando simplemente hacer una verificación cada vez que uso useSelector para verificar si los valores son los valores predeterminados y luego obtenerlos de la base de datos, pero preferiría escribirlo. una forma que permitiría ser manejado dentro del selector redux pero realmente no puedo entender cómo necesito hacerlo.
const info = useSelector(getInfo)Idealmente, me gustaría que la información se maneje cuando busque aquí
import { SET_USER_DETAILS } from "../constants/userConstants"; const intialState = { user: { }, }; const userReducer = (state = intialState, action: any) => { switch (action.type) { case SET_USER_DETAILS: return { ...state, user: action.payload }; default: return state; } };así es como se ve mi reductor actual, cuál sería la mejor manera de hacer esto, ya que me resulta un poco difícil seguir la documentación en el sitio web de redux.
Puedes usar redux-thunk. https://redux.js.org/usage/writing-logic-thunks entonces su thunk podría verse así:
const thunkFunction = (dispatch, getState) => { // logic here that can dispatch actions or read state const currentState = getState() as typeof initialState; // check if state is default state if (JSON.stringify(initialState) === JSON.stringify(currentState)) { fetch(url).then(data => { dispatch({type: SET_USER_DETAILS, payload: data}) }) } }Primero debe obtener datos en el componente de reacción:
const MyComponent = () => { // while fetch is fetching, data will be default state, // and when fetch is done, that component will automatically // rerender with new data const data = useSelector(getInfo); const dispatch = useDispatch(); useEffect(() => { dispatch(thunkFunction) },[]) return <code>{JSON.stringify(data, null, 2)}</code> }No lo probé, por lo que puede requerir algunos cambios, pero en general el concepto es así