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

# Practical createAsyncThunk

We’ve talked a lot about `createAsyncThunk`, but talk is cheap.

Update the manually created thunk to use `createAsyncThunk`: 

```js
// finderSlice.js
// before 
export const fetchTweets = (searchValue, numberOfResults) => async (
  dispatch
) => {
  try {
    dispatch(isLoadingTweets());
    const tweets = await findTweets(searchValue, numberOfResults);
    dispatch(loadingTweetsSuccess(tweets));
  } catch (error) {
    const errorMsg = error.toString();
    dispatch(loadingTweetsFailed(errorMsg));
  }
};

// now 
import { createAsyncThunk } from "@reduxjs/toolkit";

const FETCH_TWEETS = "FETCH_TWEETS";
export const fetchTweets = createAsyncThunk(
  FETCH_TWEETS,
  // 👇 note params
  async (params, thunkAPI) =>
    await findTweets(params.searchValue, params.numberOfResults)
);
```

See how succinct the `createAsyncThunk` version is? 

Now, we need to update the `createSlice` case reducers. 

```js
// finderSlice.js 
// before 
const finderSlice = createSlice({
  name: "finder",
  initialState,
  reducers: {
    loadingTweetsSuccess(state, { payload }) {
      state.tweets = payload;
      state.isLoading = false;
      state.error = null;
    },
    isLoadingTweets(state) {
      state.isLoading = true;
    },
    loadingTweetsFailed(state, payload) {
      state.isLoading = false;
      state.error = payload;
    },
  },
});

// now 
const finderSlice = createSlice({
  name: "finder",
  initialState,
  // 👇 use extraReducers NOT reducers 
  extraReducers: {
    [fetchTweets.fulfilled]: (state, { payload }) => {
      state.tweets = payload;
      state.isLoading = false;
      state.error = null;
    },
    [fetchTweets.pending]: (state) => {
      state.isLoading = true;
      state.error = null;
    },
    [fetchTweets.rejected]: (state, { payload }) => {
      state.isLoading = false;
      state.error = "We couldn't fetch tweets right now. Please try again later.";
    },
  },
});
```

Finally, the argument passed to the thunk is now an object. We need to update the argument passed when the thunk is dispatched in `Finder.js`: 

```js
// before 
dispatch(fetchTweets(searchValue, numberOfResults));
// now 
dispatch(fetchTweets({ searchValue, numberOfResults }));
```

And with that, the application should work as expected! 

While you can certainly create your thunk manually, `createAsyncThunk` performs the heavy lifting for you. It’s the recommended approach for handling async request lifecycles with `redux-toolkit`.

Learn to use the createAsyncThunk utility function in a practical way.

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

Refactoring Tweetfind to Use createAsyncThunk

Practical createAsyncThunk