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 

In this section, we’re going to set up the core data fetch logic for tweetfind. We’ll get this done first without RTK. Then we’ll introduce RTK as we continue. Before doing all that fun stuff, let’s understand how to request your consumer keys and authentication tokens for building a Twitter application.


# Performing the data fetch  
If a user enters a search term, we will make the data fetch, and log the values to the console.

We’ll use the basic react data fetching technique to accomplish this, and then refactor to use RTK. 

First, let’s write the main data fetch handler. Let’s call this `findTweets.js` and have it in the `features/finder` directory: 

```js
// features/finder/findTweets.js
const URI = "https://t-api.vercel.app/api/search";

export const findTweets = async (searchQuery, amount) => {
  const response = await fetch(
    `${URI}?query=${searchQuery}&max_results=${amount}`);

  if (!response.ok) {
    throw new Error(`Response wasn't ok!`);
  }

  return await response.json()
};
```


That’s about it. This is mostly a standard `fetch` API usage. 
It may be worth noting that the `findTweets` function receives two parameters:

(i) The search query   
(ii) Number of tweets

As per the Twitter API restrictions, the number of tweets possible may differ. For me, this is a number between 10 and 100. 

The `findTweets` function does nothing if it isn’t invoked. Let's confirm the `findTweets` function is invoked upon a user clicking the search button. 

```js
// Finder.js

export function Finder() {
  // local state to hold to search input value 
  const [searchValue, setSearchValue] = useState("");
  // actual search handler called on button click
  const handleSearch = async () => {
    if (searchValue) {
      // reset search input
      setSearchValue("");
      // perform data fetch 
      const data = await findTweets(searchValue, 10);
      // log data received 
      console.log({ data });
    }
  };

  // in rendered UI: 

    return (
    <>
      <Flex alignItems="center">
        {/* Add value and onChange to the Input component*/}
        <Input
          value={searchValue}
          onChange={(evt) => setSearchValue(evt.target.value)}
          placeholder="enter a theme or hashtag to search"
        />
        {/* Add an onClick handler to the Button*/}
        <IconButton
          ...
          onClick={handleSearch}
        />
      </Flex>
    </>
  );

}
```

Now, I’ve taken the liberty to heavily add comments to the block of code above. That should help make sense of it. 

# Displaying the fetched data 
With the core logic done, at least from a typical React data fetch flow, we may now render the tweets received from the server as seen below: 

```js
...
// import TweetEmbed: this will render the Tweets for us
import TweetEmbed from "react-tweet-embed";
// import Wrap and WrapItem from chakra 
import { Flex, Input, IconButton, Wrap, WrapItem } from "@chakra-ui/react";

export function Finder() {
  ...
  // internal state to hold the data fetched
  const [data, setData] = useState([]);

  const handleSearch = async () => {
      ...
      const data = await findTweets(searchValue, 10);
      // remove console.log. save data to local state
      setData(data);
  };
	

  return (
   <>
   ...
   <Wrap mt={5}>
        {data.map((tweet) => (
          <WrapItem key={tweet.id}>
           {/** Render the Tweets by just passing the IDs to TweetEmbed **/}
            <TweetEmbed id={tweet.id} />
          </WrapItem>
        ))}
    </Wrap>
   </>
  )
}
```

That settles it. We have the core data fetching logic completed via a typical React flow. You may be asking _“Why?”_ This is so we can introduce RTK and truly understand how it differs from standard react/Redux. Let’s get that started in the next section!



We’ll use the basic react data fetching technique to accomplish this, and then refactor to use RTK. 

First, let’s write the main data fetch handler. Let’s call this `findTweets.js` and have it in the `features/finder` directory: 

```js
// features/finder/findTweets.js
const URI = "https://t-api.vercel.app/api/search";

export const findTweets = async (searchQuery, amount) => {
  const response = await fetch(
    `＄{URI}?query=＄{searchQuery}&max_results=＄{amount}`);

  if (!response.ok) {
    throw new Error(`Response wasn't ok!`);
  }

  return await response.json()
};
```


That’s about it. This is mostly a standard `fetch` API usage. 
It may be worth noting that the `findTweets` function receives two parameters:

(i) The search query   
(ii) Number of tweets

As per the Twitter API restrictions, the number of tweets possible may differ. For me, this is a number between 10 and 100. 

The `findTweets` function does nothing if it isn’t invoked. Let's confirm the `findTweets` function is invoked upon a user clicking the search button. 

```js
// Finder.js

export function Finder() {
  // local state to hold to search input value 
  const [searchValue, setSearchValue] = useState("");
  // actual search handler called on button click
  const handleSearch = async () => {
    if (searchValue) {
      // reset search input
      setSearchValue("");
      // perform data fetch 
      const data = await findTweets(searchValue, 10);
      // log data received 
      console.log({ data });
    }
  };

  // in rendered UI: 

    return (
    <>
      <Flex alignItems="center">
        {/* Add value and onChange to the Input component*/}
        <Input
          value={searchValue}
          onChange={(evt) => setSearchValue(evt.target.value)}
          placeholder="enter a theme or hashtag to search"
        />
        {/* Add an onClick handler to the Button*/}
        <IconButton
          ...
          onClick={handleSearch}
        />
      </Flex>
    </>
  );

}
```

Now, I’ve taken the liberty to heavily add comments to the block of code above. That should help make sense of it. 

# Displaying the fetched data 
With the core logic done, at least from a typical React data fetch flow, we may now render the tweets received from the server as seen below: 

```js
...
// import TweetEmbed: this will render the Tweets for us
import TweetEmbed from "react-tweet-embed";
// import Wrap and WrapItem from chakra 
import { Flex, Input, IconButton, Wrap, WrapItem } from "@chakra-ui/react";

export function Finder() {
  ...
  // internal state to hold the data fetched
  const [data, setData] = useState([]);

  const handleSearch = async () => {
      ...
      const data = await findTweets(searchValue, 10);
      // remove console.log. save data to local state
      setData(data);
  };
	

  return (
   <>
   ...
   <Wrap mt={5}>
        {data.map((tweet) => (
          <WrapItem key={tweet.id}>
           {/** Render the Tweets by just passing the IDs to TweetEmbed **/}
            <TweetEmbed id={tweet.id} />
          </WrapItem>
        ))}
    </Wrap>
   </>
  )
}
```

That settles it. We have the core data fetching logic completed via a typical React flow. You may be asking _“Why?”_ This is so we can introduce RTK and truly understand how it differs from standard react/Redux. Let’s get that started in the next section!



Carry out an application data fetch with a plain Redux application. 

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

Initial Application Data Fetch

Introduction