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

# configureStore 

You’re no stranger to `configureStore`. We took a look when we built Flappy earlier in the course.  Let’s apply that same knowledge here while extending what you already know. 

# The main application features 
The tweetfind application has two main features:

(i) Search for tweets based on an input query.   
(ii) Choose the number of results to be returned from the search.

The way we’re going to approach this is by having two state slices (**hint:** we will create these with `createSlice`). There should be one for each feature.

We will also keep the feature by folder pattern and have two sub-directories in the features folder: `finder` and `numberOfResults`. 

You might be wondering why the folder structure is encouraged. The chief reason is ease. It’s a lot easier to look in one place and find everything you need instead of jumping through multiple folders. 

Now, go ahead and create these folders. You should already have the `finder` directory. So, create `numberOfResults`. 

To set up the Redux store, we need to have some application reducer in place. This is why we’ll build the basic slices of state for `finder` and `numberOfResults` and have those hooked up with the Redux store.

Here’s what the basic eventual state object would look like: 

```js
{
  finder: {} // hold all state related to the finder feature
  numberOfResults: string // 10, 15 or 20
}
```
 
Let’s keep things basic, and start with the following in `finderSlice.js`: 

```js
import { createSlice } from "@reduxjs/toolkit";

const initialState = { tweets: [] };

// create the slice 
const finderSlice = createSlice({
  name: "finder",
  initialState,
  reducers: {
    addTweet(state, payload) {
      state.tweets = payload;
    },
  },
});

// export the action creator and reducer
export const { addTweet } = finderSlice.actions;
export default finderSlice.reducer;
```


The structure of the code above is just as described with the Flappy application. `createSlice` is invoked with an object defining the slice of state: `name`, `initialState`, and `reducers`. 

Note that we have a simple `addTweet` reducer right now. This reducer case function will take a payload of tweets and update the application state. 

```js
addTweet(state, payload) {
    // look here 👇
    state.tweets = payload;
 }
```

Let’s not leave `numberOfResults` bare. Create a `numberOfResultsSlice.js` file in the `numberOfResults` directory and have the following written: 

```js
import { createSlice } from "@reduxjs/toolkit";

// create the slice 
const numberOfResultsSlice = createSlice({
  name: "numberOfResults",
  initialState: "10",
  reducers: {
    setNumberOfResults(state, action) {
      return action.payload;
    },
  },
});

// export the action creator and reducer 
export const { setNumberOfResults } = numberOfResultsSlice.actions;
export default numberOfResultsSlice.reducer;
```

Again, we have a familiar setup. Note here the `setNumberOfResults` case reducer: 

```js
setNumberOfResults(state, action) {
  // look here 👇
  return action.payload;
}
```

When you have a number or string as the state value and need to update that, return a new value within the reducer. This will update the state accordingly. 

Don’t try to mutate in some funny way. Also, this won’t work: 

```js
setNumberOfResults(state, action) {
  // look here 👇
  state = action.payload;
}
```

This can save you from debugging a seemingly nasty bug. Once we have the state slices set up, we may now set up the Redux store. 

```js
// app/store.js
import { configureStore } from "@reduxjs/toolkit";

import finderReducer from "../features/finder/finderSlice";
import numberOfResultsReducer from "../features/numberOfResults/numberOfResultsSlice";

export default configureStore({
  reducer: {
    finder: finderReducer,
    numberOfResults: numberOfResultsReducer,
  },
});
```

This imports the reducers from the slices we created earlier and passes them to the reducer parameter for `configureStore`. 

```js
export default configureStore({
  // look here 👇
  reducer: {
    finder: finderReducer,
    numberOfResults: numberOfResultsReducer,
  },
})
```


Note that we pass an object here. With Flappy, we passed a single reducer:

```js
reducer: flappyMoodReducer
```

This is possible because the `configureStore` reducer parameter can take a single reducer function that will be used as the root reducer or an object of slice reducers that will be internally passed to `combineReducers`. This is very convenient. 

Set up the tweetfind application to use configureStore.

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

Setting Up the RTK Store with configureStore

configureStore

The main application features