How to Update Multiple States with one Action and Thunks in Redux Toolkit | Answering a Commenter

In this video I answer a good question I got on my last video,

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:

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!

#redux #reduxtoolkit #reducers #javascript #reactjs #react

[lethe_yoon]

This is great! I was wondering about updating multiple different slice states, but didn't know how to implement it with RTK. Now, I got the niche, thank you you're my best tutor!

[mikeedwards]

Thanks so much for this! Weirdly enough, today I had exactly that first case you addressed with the actions coming from another slice (but not needing to kick off a fetch or anything.) If I'd searched for an answer to this just a few hours earlier, I'd have missed this video and would've spent hours chasing my tail looking for the proper RTK way to do this—which is this! And it works perfectly in Typescript! And with none of the painful type stuff you sometimes get in async thunks!

[sfhmdby]

Thanks, Clear and perfect explanation

[ahmadpak]

Thank you. Helped me clear my concepts.

[xmatthewday]

Excellent explanation, thank you. Do you have this in a GH repo, by chance?

[banjobsiramanont]

Thnk you so much for making this video. Problem solved!!!

[jmyykvp]

That's a great explanation, thank you for this. If there are multiple APIs to call one after other, is this the best way to handle in RTK? Say, I have to call one API then based on the data fetched, I have store it in redux store and with that data I have to call another API (Asynchronous chaining). So, for this requirement, is this the right way - what you showed in this video?

[nikhilgupta]

Great video @covalence but my use case is I have a single asyncThunk(getUserDataById in your example). I do not want other side effects(dispatch calls inside to other reducers), I need to return data from asyncThunk and make multiple slices listen for that data.

Slice 1
import { fetchAdmin } from '../thunks/fetchAdmin';
const adminSlice = createSlice({
name: 'admin',
initialState: {},
reducers: {},
extraReducers: (builder) => {
builder.addCase(fetchAdmin.fulfilled, (state, {payload}) => {
state.data = payload;
})
}
});

Slice 2
import { fetchAdmin } from '../thunks/fetchAdmin';
const userSlice = createSlice({
name: 'admin',
initialState: {},
reducers: {},
extraReducers: (builder) => {
builder.addCase(fetchAdmin.fulfilled, (state, {payload}) => {
state.data = payload;
})
}
});

With this approach I do see my userSlice's extraReducer getting called with the correct payload however user state is not changing. I understand when we call asyncThunk it is associated with a specific sliceKey/action. Is this the reason why state of other slice reducer wouldn't change?