Redux Toolkit: createAsyncThunk
This is an attempt at a quick walk through of Redux Toolkit and createAsyncThunk. This is by no means extensive, I just wanted to take a few minutes to jot down some notes that I found helpful in this process.
Basic SetUp:
First, I installed @reduxjs/toolkit. My package.json looked like this:
Next, I created a basic, empty slice.
For a slice, you need to import { createSlice }. The slice is an object with nested information. We’ll go through adding to it, but at it’s base, a slice is an object.
- “name” : name your reducer
- “initialState”: empty object
- “reducers”: empty object
- “extraReducers”: empty object
From here, we want to set up our store.js:
Inside our store, we will import our reducer and by using import { configureStore } we can set it up as shown above.
Now, we need to wrap our app in our Provider that grants access to the store to everything else. index.js:
Please note, that I also useContext in this application. The orange underlined <UserProvider> that also wraps around my application is my Context.
Now my entire application has access to the store. I can store information in global state and every component can access the store via useSelector and can dispatch global functions with useDispatch.
Take a minute here…this is pretty powerful stuff! Global state enables EVERY COMPONENT to access this data just by getting information from the store. This is super cool!
Ok….moving on. Next, I built out the slice so that the information is accessible.
Initial State:
First, I need to establish initial state. What keys do I want to access as I view and manipulate the data. This is a categoriesSlice, so I’m assuming I will eventually have an array of objects called categories. I will probably encounter problems, so I should also establish an errors array. And finally, I will be utilizing async functions, so I should have a status that can change from “pending” to “idle”. BOOM, initialState set up.
Reducers:
Next, I can set up reducers. Imagine I’ve had a user login and they have put something into the state.categories array. When they logout, I want to have the ability to change that array back to an empty array. This function takes in state and just re-establishes that state.categories = []. These reducers are explicitly exported at the bottom as actions. They can be accessed in components with useDispatch.
I can also write other functions here where I addCategories, or deleteCategories both of which would take in (state, action). It’s important to note there that these actions do not do anything to our data in the database. They are synchronous and they only affect our client view.
createAsyncThunk:
Now the fun begins…outside of my slice, I want to export const any asynchronous functions that I need to define. These will include any fetch requests and will handle sending that information to the database. These do not need to be explicitly exporting as part of our actions, but are exported inline. They are also accessible to components with useDispatch.
extraReducers:
extraReducers take the information from our asynchronous fetches and then use that data to manipulate global state. As shown above, they can alter state while the action is pending and then again once it is fulfilled.
Redux References: