How to Update Multiple States with one Action and Thunks in Redux Toolkit | Answering a Commenter
4.8 هزار بار بازدید -
پارسال
-
In this video I answer
In this video I answer a good question I got on my last video,
Chaining Asynchronous Dispatches in Redux Toolkit (Chaining Asynchronous Dispatches in R...). It inspired me to make this entire video! We show how the extraReducers property of the Redux Toolkit createSlice function can be used to respond to other action types that were *NOT* created by that reducer itself. This means we can have one action trigger one, or ALL, of our reducers to trigger a state change across the application.
However, reducers are pure functions meaning no side effects can run within them. So if you have to fetch data and update state based on an outside action, that is a no no. We can handle that issue, though, by utilizing RTK's createAsyncThunk function. This has access to the ThunkAPI which is just the normal set of methods on our Redux store, such as getState and dispatch. We can then dispatch actions, still synchronously, within our thunk to other reducers as needed. Then the asynchronous code finishes and the "containment function" aka the thunk triggers its associated reducer to then update when fulfilled. BOOM ROASTED!
Link to the video where I build a quick Redux Toolkit Implementation if you need a crash course in it:
How to Persist Redux State to an API ...
Don't forget to like this video and subscribe to our channel – we're publishing more videos and walkthroughs every week. Comment below and let us know what you'd like to see next!
Join the Covalence community: https://covalence.io
Shop Covalence merch: https://covalence.merchntly.com
#redux #reduxtoolkit #reducers #javascript #reactjs #react
Chaining Asynchronous Dispatches in Redux Toolkit (Chaining Asynchronous Dispatches in R...). It inspired me to make this entire video! We show how the extraReducers property of the Redux Toolkit createSlice function can be used to respond to other action types that were *NOT* created by that reducer itself. This means we can have one action trigger one, or ALL, of our reducers to trigger a state change across the application.
However, reducers are pure functions meaning no side effects can run within them. So if you have to fetch data and update state based on an outside action, that is a no no. We can handle that issue, though, by utilizing RTK's createAsyncThunk function. This has access to the ThunkAPI which is just the normal set of methods on our Redux store, such as getState and dispatch. We can then dispatch actions, still synchronously, within our thunk to other reducers as needed. Then the asynchronous code finishes and the "containment function" aka the thunk triggers its associated reducer to then update when fulfilled. BOOM ROASTED!
Link to the video where I build a quick Redux Toolkit Implementation if you need a crash course in it:
How to Persist Redux State to an API ...
Don't forget to like this video and subscribe to our channel – we're publishing more videos and walkthroughs every week. Comment below and let us know what you'd like to see next!
Join the Covalence community: https://covalence.io
Shop Covalence merch: https://covalence.merchntly.com
#redux #reduxtoolkit #reducers #javascript #reactjs #react
پارسال
در تاریخ 1402/01/02 منتشر شده
است.
4,819
بـار بازدید شده