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 

Do you remember what "thunks" are? Here’s a quick reminder. 

When you first learn Redux, you were likely taught that you must dispatch an action to make a state change and that the action has to be an object. Usually, it is in the following form:

```js
{
  type: "ACTION_TYPE",
  payload: {}
}
```

Well, that’s not entirely true.

In the typical flow of a Redux app, the reducer is the only actor that requires the action to be an object!


This means you can dispatch whatever Javascript data type you want but must transform it into an object before it reaches the reducers.

This is the entire premise on which thunks are built.

By dispatching a “function” (aka thunk), a middleware could act on it. It could even pass it special arguments. 


# So, what is a "thunk"?
Generally speaking, a **thunk** is a function that wraps an expression to delay its evaluation.

If you choose to return a function from an action creator, we can safely call that a thunk.

```js
// before:
function fetchTweetsAction () {
	//return an action object
	return {
	        
  }
}

// now:
function fetchTweetsAction () {
    // return a function 
  	return function() {

  }
}
```

How does this help us at all? 

We’re going to create a thunk to handle the fetching of tweets. 

First, whenever a user clicks the search button, we will dispatch a thunk. Remember that this is just a function. 

Now here comes the interesting bit. The dispatched function will be passed the `dispatch` and `getState` Redux store methods. This is what makes thunks powerful. 

```js
function fetchTweetsAction () {
    // receives dispatch and getState arguments 
  	return function(dispatch, getState) {

  }
}
```

Within the thunk, we will then perform the actual data fetch and dispatch actions to denote loading and success states. 

Let’s see how that works in code by creating a new thunk called `fetchTweets`.  We’ll do this in the `finderSlice.js` file, keeping every state-related logic in one place. 

```js
export const fetchTweets = (searchValue, numberOfResults) => async (dispatch) => {
  
};
```

Note how this takes the `searchValue` and `numberOfResults` arguments and returns an async function that receives the store `dispatch` method. That’s a thunk! 

Under the hood, `redux-toolkit` sets up a middleware that will intercept the dispatched function and invoke it with the store’s `dispatch` and `getState` methods. We haven’t used `getState` here, as we don’t need it. 

When it is time to dispatch this thunk, it’ll be invoked like this: 

```js
// dispatch with searchValue and numberOfResults
dispatch(fetchTweets('search value', 10))
```

Within the thunk, we will now make the actual data fetch and dispatch some actions while we're at it: 

```js
// import the function that calls the Twitter API
import { findTweets } from "./findTweets";

export const fetchTweets = (searchValue, numberOfResults) => async (dispatch) => {
    // loading ...
    dispatch(isLoadingTweets());

    // perform actual data fetch 
    const tweets = await findTweets(searchValue, numberOfResults);

    // success 
    dispatch(loadingTweetsSuccess(tweets));
};
```

In the code block above, `findTweets` refers to the actual fetch handler that we created in `findTweets.js`. 

But where do these actions come from? Let’s add those to the `finderSlice` slice: 

```js
// before 
const finderSlice = createSlice({
  name: "finder",
  initialState,
  reducers: {
    addTweet(state, payload) {
      state.tweets = payload;
    },
  },
});
```

Remember that the `createSlice` utility creates the reducer and action creators on our behalf. Let’s take advantage of this to create the `isLoadingTweets` and `loadingTweetsSuccess` action creators. 

First, let’s change the `initialState` of the slice to hold more information, e.g., loading state. 

```js
// before 
const initialState = { tweets: [] };

// now 
const initialState = { tweets: [], isLoading: false, error: null };
```

We’ll consider error handling later, so let’s have it in the initial state as `null`.  

Now, we can update the slice implementation as follows: 

```js
...

const finderSlice = createSlice({
  name: "finder",
  initialState,
  reducers: {
    // note that the payload is deconstructed from the action object
    loadingTweetsSuccess(state, {payload}) {
      state.tweets = payload;
      state.isLoading = false;
      state.error = null;
    },
    isLoadingTweets(state) {
      state.isLoading = true;
    },
  },
});
```

Easy to reason about! 

Now, we just need to pull out the action creators from the returned slice object: 

```js
// before 
export const { addTweet } = finderSlice.actions;

// now 
export const { isLoadingTweets, loadingTweetsSuccess } = finderSlice.actions;
```


If you followed the steps above, you’d have successfully created a thunk that is ready to be dispatched! 

 
Let’s now move on to the next lesson where we perform the actual thunk dispatch, and change the UI to handle the 
loading state appropriately.

Get started with thunks and Redux toolkit.



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

Thunks and Redux Toolkit