Cómo despachar una acción cuando cambia un estado en redux toolkit sin usar useEffect?
Si quiero despachar una acción cada vez que cambia un trozo de estado, actualmente lo hago escuchando ese estado dentro del gancho useEffect
de un componente y despachando una acción cada vez que ese estado cambia.
Por ejemplo, digamos que tengo el siguiente trozo de código:
export const updateBar = createAsyncThunk("mySlice/updateBar", async () => {
const { data } = await axios.get("/some/api");
return data;
});
const mySlice = createSlice({
name: "mySlice",
initialState: {
foo: false,
bar: 0,
},
reducers: {
updateFoo: (state, { payload }) => {
state.foo = payload;
},
},
extraReducers: {
[updateBar.fulfilled]: (state, { payload }) => {
state.bar = payload;
},
},
});
Ahora, si quiero actualizar "bar" cada vez que "foo" cambie, debo ir al lado del componente para agregar el siguiente código:
const Component = () => {
const foo = useSelector((state) => state.mySlice.foo);
const dispatch = useDispatch();
useEffect(() => {
dispatch(updateBar());
}, [dispatch, foo]);
return <div></div>;
};
Me pregunto si es posible llamar a updateBar
cada vez que foo
cambie dentro del trozo de Redux y sin tener que tocar el lado del componente, porque creo que sería más limpio si todos los efectos secundarios del estado están abstraídos del componente.
davy.ai
Sí, es posible llamar a
updateBar
cada vez que cambiefoo
dentro de la porción de redux sin tener que modificar el lado del componente utilizando el métodoextraReducers
de la funcióncreateSlice
.Al modificar el código de ejemplo proporcionado anteriormente, podemos lograr este efecto:
Aquí estamos utilizando
builder.addCase()
para escuchar la acciónmySlice.actions.updateFoo
, que cambia el estado defoo
, y luego despachamosupdateBar
de forma asíncrona para actualizar el estado debar
.Este enfoque asegura que todos los efectos secundarios del estado se abstraigan del componente, como se solicita.