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 
After two sections that could probably put you to sleep, we are back to the fun part of the course. Let’s continue building out the UI for tweetfind.

In this section, we’re going to lay the foundation for the application UI. There isn’t any logic; only building out the user interface.

# UI libraries 

Since this is not a CSS course, I want to be effective by explaining what’s relevant. We’ll employ some libraries to make building the UI easy, so we can focus on the core logic of the application. 

`Chakra-UI` has been my component library of choice for the past few months. It’s simple and modular. It's perfect for our use case, and `react-tweet-embed` will save us the hassles of building a tweet component. 

Here’s the high-level flow of the application: 
- Receive search query from the input field. 
- Fetch data from Twitter remote servers.
- Data received contains IDs. Pass the IDs on to `react-tweet-embed` to display the tweets.

Okay, let’s build tweetfind. 

Once you have the libraries installed, let’s integrate them into the application. 

`Chakra` requires a bit of setting up. For Chakra UI to work correctly, you need to set up the `ChakraProvider` at the root of your application. 

In the root `index.js` file, import and render the `ChakraProvider` component as seen below: 

```js
// index.js
...
import { ChakraProvider } from "@chakra-ui/react";

const render = () => {
  const App = require("./App").default;

  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store}>
        {/* Look here 👇*/}
        <ChakraProvider>
          <App />
        </ChakraProvider>
      </Provider>
    </React.StrictMode>,
    document.getElementById("root")
  );
};
...

```

Now, let’s update `Finder.js` to spit out more than just the boring "Hi" text.

```js
// features/finder/Finder.js

// before 
import React from "react";

export function Finder() {
  return <div>Hi</div>;
}


// now 
import { Flex, Input, IconButton } from "@chakra-ui/react";
import { SearchIcon } from "@chakra-ui/icons";

export function Finder() {
  return (
    <>
      <Flex alignItems="center">
        <Input
          placeholder="enter a theme or hashtag to search"
          size="lg"
          mr={3}
        />
        <IconButton
          colorScheme="blue"
          aria-label="Search Twitter"
          icon={<SearchIcon />}
        />
      </Flex>
    </>
  );
}
```

The chakra-ui components are so well named that you can read through the code block above and get a clear sense of how the UI is composed. 

This gives us the search field and button, but it doesn’t look excellent yet: 


Use chakra-ui and react-tweet-embed in your Redux toolkit 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

Building Out the Initial Application UI

Introduction

UI libraries