Mastering Asynchronous Logic in Redux Apps with createAsyncThunk
When it comes to state management, Redux stores are incredibly powerful. However, they’re not designed to handle asynchronous logic on their own. That’s where middleware comes in – specifically, Redux Thunk’s middleware, which is now included by default in Redux Toolkit.
Understanding createAsyncThunk
createAsyncThunk is a game-changer for performing delayed, asynchronous logic in Redux apps. It allows developers to write logic that has side effects, such as fetching data from an API. But how does it work?
A typical Redux slice in a React app contains your store and reducer functions used to modify store data. Within createSlice, synchronous requests are handled in the reducers object, while extraReducers handles asynchronous requests. Asynchronous requests created with createAsyncThunk accept three parameters: an action type string, a callback function (referred to as a payloadCreator), and an options object.
Breaking Down the Parameters
Let’s take a closer look at these parameters using an example from a blog application. The action type string might be posts/getPosts. When this function is dispatched from a component, createAsyncThunk generates promise lifecycle action types using this string as a prefix:
posts/getPosts/pendingposts/getPosts/fulfilledposts/getPosts/rejected
The payloadCreator then executes to return either a result or an error. If an error occurs, posts/getPosts/rejected is dispatched, and createAsyncThunk returns a rejected promise containing an Error instance or a plain descriptive message.
Handling Errors and Dispatching Actions
So, how do we handle errors and dispatch actions in components? By using useSelector and useDispatch from react-redux, we can read state from a Redux store and dispatch any action from a component, respectively.
When dispatching actions, it’s essential to note that payloadCreator accepts only two parameters: a custom argument that may be used in your request and thunkAPI. thunkAPI is an object containing all the parameters that are normally passed to a Redux Thunk function, such as dispatch and getState.
Error Handling with thunkAPI
When your payloadCreator returns a rejected promise, the rejected action is dispatched (with action.payload as undefined). To display custom error messages, you can use thunkAPI to return a resolved promise to the reducer, which has action.payload set to a custom value of your choice.
Taking it to the Next Level
We’ve covered the basics of createAsyncThunk, but there’s more to explore. You can cancel requests, and Redux Toolkit’s RTK Query data fetching API offers a purpose-built solution for managing data fetching.
Get Started with LogRocket
Ready to take your error tracking to the next level? Sign up for LogRocket and get set up with modern error tracking in minutes. With LogRocket, you can create better digital experiences for your users.