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 

This section is going to be short and straight to the point. 

From the start of the course, I’ve assumed you have the devtools installed on your local machine. If that’s not the case, be sure to download the [Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en).

Perform a search:
 
![search for the redux devtools extension](/api/collection/5191711974227968/6298082644328448/page/5154235182743552/image/4652327720452096)

And download the devtools extension from the extension page: 

![view the redux devtools extension](/api/collection/5191711974227968/6298082644328448/page/5154235182743552/image/5979614449500160)

# Configuring the devtools 
By default, RTK has the Redux devtools enabled, but you can configure this via the `devtools` field in the `configureStore` parameter object: 

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

And sure enough, devtools will be disabled if you tried this on your local machine: 

![A disabled devtools integration](/api/collection/5191711974227968/6298082644328448/page/5154235182743552/image/4645863022919680)

Here’s the signature for the devtools configuration value: 

```js
configureStore({
  // look here 👇
  devTools: boolean | DevToolsOptions,
})
```

You can pass a Boolean of `true` or `false` or configure the devtools even further via an options object. For most use cases, you’d be fine with leaving the devtools setup as is. However, if you want to make a change, now you know how! Be sure to also check out the devtools [options](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md) that you can pass on here, i.e., `DevToolsOptions`.

Here’s a simple example to change the app name displayed on the devtools monitoring page. 

Here’s the name shown now: 

![The name of the application displayed in devtools as React Redux App](/api/collection/5191711974227968/6298082644328448/page/5154235182743552/image/5246094549712896)

`React Redux App` is a bit of a sad name, eh? 

Let’s change that: 

```js
// app/store.js
export default configureStore({
  reducer: {
    finder: finderReducer,
    numberOfResults: numberOfResultsReducer,
  },
  // look here 👇
  devTools: {
    name: "TweetFind",
  },
});
```

And now, we should have this: 

![The name of the application displayed in devtools as Tweetfind](/api/collection/5191711974227968/6298082644328448/page/5154235182743552/image/5846373976506368)  

Great! 

In most cases,  changing the displayed application name isn’t something you’d concern yourself with. But for advanced use cases, it’s great to know that you can configure the devtools however you want. Yes, RTK sets it up by default. But in the end, you’ve still got the final say.



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

Using the Redux Devtools

Introduction