Delve into Redux Toolkit to streamline Redux development with best practices. Gain insights into creating stores and reducers, and build TweetFind, a Twitter search app, for your portfolio.

data.tar.gz

main-branch

ice-creamy-completed

tweetfind-completed

Learn Redux toolkit (RTK) which highlights the new redux best practices and the new standard of developing applications. With RTK, redux development is more efficient and easier to understand.

Redux toolkit brings the much-needed simplicity you’ve longed for in your redux development. It has out-of-the-box support to handle common use cases such as creating the redux store, creating reducers, handling immutable update logic, and much more.

At the end of the course, you will build tweetfind, a Twitter search application. This will be a great addition to your portfolio.

Intermediate Redux with Redux Toolkit

# Why createAsyncThunk? 

If you created 100 thunks for fetching async data, you’ll notice some similar patterns across all of them. Common patterns breed abstractions. 


Whenever there are similar patterns, our instinct as developers is to abstract this into a common utility. This is the premise for `createAsyncThunk`.

Creating an async thunk is like signing a pact that says you’re going to create an async function and will make some state updates depending on the state of that async action: loading, success, or error. 

In that case, think of `createAsyncThunk` as a template generator for that signed pact. 

It abstracts the standard recommended RTK approach for handling async requests by taking a Redux action type and a callback function that should return a promise. 


```js
const myThunk = createAsyncThunk('action-type', async (params, thunkAPI) => {
   // await some promise 
 })
```

Don’t get confused with the async function in the code block above.  An async function returns a promise by default, so that’s good. But what about the `params` and `thunkAPI` parameters? 

Think about how the thunk returned from `createAsyncThunk` will be dispatched. It is the same as a thunk you create from scratch: 

```js
dispatch(myThunk(someArgument))
```

In this case, `someArgument` will be passed as `params` to the async function. 

The difference with the thunk created by `createAsyncThunk` is that you must pass only one argument when the thunk is dispatched. 

```js
// don't do this: 
dispatch(myThunk(someArgument, anotherArgument)) 
```

Instead, pass these as a single object argument: 

```js
// do this: 
dispatch(myThunk({someArgument, anotherArgument})) 
```

This is because the second value passed onto the `createAsyncThunk` async function will always be an object that contains parameters normally passed to a Redux thunk function, e.g., `dispatch`, `getState`, and a few other advanced methods, such as `requestId`, `signal`, and `rejectWithValue`. This is named `thunkAPI` below: 

```js
createAsyncThunk('action-type', async (params, thunkAPI) => {
   // await some promise 
 })
```


# createAsyncThunk overview 
Enough of the theory. How would `createAsyncThunk` work in practice? 

Let’s consider an elementary example before we refactor `Tweetfind` to use `createAsyncThunk`.

Since `createAsynThunk` doesn’t generate any reducers and really doesn’t care what data you’re fetching, the ease of `createAsyncThunk` comes from the promise lifecycle action types it generates. 

Here’s the example as promised: 

```js
// create the thunk: 
const fetchDataThunk = createAsyncThunk('action-type', async (id, thunkAPI) => {
   const data = await fetchData(id)
 })

// Later, dispatch the thunk as needed in the app
dispatch(fetchDataThunk(123))

// handle thunk action types in slice reducers
const fetchDataSlice = createSlice({
  name: 'data',
  initialState: {isLoading: false},
  reducers: {
    // standard reducer logic
  },
  extraReducers: {
    [fetchDataThunk.pending]: (state, action) => {
      // update loading state
      state.isLoading = true 
    }
  }
})
```
 

Okay, I know you have questions. 

Hold the thoughts you have though, and join me in the next lesson where it’s explained in detail.


Get started with the createAsyncThunk utility provided by Redux toolkit, and learn how to simplify the creation of thunks.


What is Redux Toolkit and Why Use it?

Building Your First Redux Toolkit Application

Challenge on Building Your First Redux toolkit Application

RTK Deep Dive: Build a Twitter Search Application

Conclusion: Where to Go From Here

Appendix

Simplifying Thunks With createAsyncThunk

Why createAsyncThunk?