Thunk Dispatch and Handling the UI Loading State

Explore how to integrate thunk dispatches into your React UI using Redux Toolkit. Understand managing asynchronous states by dispatching fetch actions and displaying loading indicators while data is fetched in your Twitter search application.

We'll cover the following...

- Introduction
- Playground

Introduction

In the last section, we set up a thunk. Now we get to actually integrate it into the application UI.

Consider the current click handler for the search button:

const handleSearch = async () => {
    if (searchValue) {
      setSearchValue("");
      // note that the numberOfResults is hardcoded to ten(10)
      const data = await findTweets(searchValue, 10);
      setData(data);
    }
  };

findTweets is invoked and the data received is set to the local state. ...

1.What is Redux Toolkit and Why Use it?

2.Building Your First Redux Toolkit Application

3.Challenge on Building Your First Redux toolkit Application

4.RTK Deep Dive: Build a Twitter Search Application

5.Conclusion: Where to Go From Here

6.Appendix

Thunk Dispatch and Handling the UI Loading State

Introduction