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

# Introduction 

To abstract the async state patterns commonly used in thunks, `createAsyncThunk` makes use of the standard `Promise` object’s state. 

Here’s a reminder. A Javascript promise can only be in one of these states:

- **Pending:** Initial state that is neither fulfilled nor rejected. 
- **Fulfilled:** The operation was completed successfully.
- **Rejected:** The operation failed.

As you may have figured out, pending could be likened to the loading state, fulfilled to the success state, and rejected could be likened to the error state. 

How does this help? 

Here’s an example. Let’s say you created an async thunk via `createAsyncThunk`. For example:

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

Based on the state of the promise, `createAsyncThunk` will generate and dispatch three action creators. 

In the example above, actions with the following action types will be created and dispatched: 

1. **Pending:** `action-type/pending`
2. **Fulfilled:** `action-type/fulfilled`
3. **Rejected:** `action-type/rejected`

As you may have noticed, whatever the action type passed to `createAsyncThunk` is, it’ll append the strings`/pending`, `/fulfilled`, or `/rejected`. 

Here’s another fun fact. As with the `createAction` utility function, you don’t have to write out these action types manually. 

Given the following thunk: 

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

You may just access the `pending`, `fulfilled`, or `rejected` property on the returned thunk. For example:

```js
const fetchDataSlice = createSlice({
  // ...
  extraReducers: {
    [fetchDataThunk.pending]: (state, action) => {
     
    },
	[fetchDataThunk.fulfilled]: (state, action) => {
     
    },
	[fetchDataThunk.rejected]: (state, action) => {
     
    }
  }
})
```


# extraReducers 
You may have noticed that with the actions dispatched by `createAsyncThunk`, we don’t handle the action types in the usual `reducers` object but in `extraReducers`.  Why is that the case? 

The `reducers` object holds your standard reducer logic, particularly those with auto-generated action types via `createSlice`. 

```js
createSlice({
   reducers: {
     actionCreatorOne() {
     },
     actionCreatorTwo() {
     }
   }
})
```

However, to handle additional action types that are not part of the autogenerated action types from the case reducers, you must do so via the `extraReducers` object like so: 

```js
createSlice({
   reducers: {
     actionCreatorOne() {
     },
     actionCreatorTwo() {
     }
   },
   // look here 👇
   extraReducers: {
    'my-action-type': (state, action) => {
       // can update state here
     }
   }
})
```

This is perfect, as we may handle action types such as those created by `createAsyncThunk` here. 

Now, here’s the example you didn’t quite understand before: 

```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 
    }
  }
})
```

Does it make a little more sense now? 


While you may certainly write your thunks manually, `createAsyncThunk` greatly simplifies this and reduces more boilerplate. 

If you're going to handle loading, success, and error states, then why not do it without manually writing and dispatching corresponding actions?


Learn to use the lifecycle actions provided by createAsyncThunk to handle data fetching in your Redux toolkit applications 

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

Using Promise Lifecycle Actions From createAsyncThunk

Introduction