Redux Toolkit - The Standard Way to Write Redux
Tags: react, javascript, webdev, beginners
Published: 2021-07-28 16:54:39

[Redux](https://redux.js.org/) is a state manager for JavaScript Applications. Mostly used with React. Most of the large-scale react apps include redux for managing the global state. But does all the redux based application follows the standard approach?

Redux needs to be implemented in a standard and optimal way to avoid issues in your React App. When we start to develop a redux-based app, We will lead to decision fatigue on searching which the best practice. To avoid that kind of confusion. I will share the standard way to implement redux in your React App and also how you structure your react-redux app. Let’s dispatch

## Redux Toolkit

[Redux Toolkit](https://redux-toolkit.js.org/) is a redux official package to implement redux logic in a standard and minimalized way. Let’s quickly see, What does Redux Toolkit address

1. Configure the redux store with a single function!
2. Not required to add additional packages to implement redux.
3. No more Boilerplate codes.
4. In build thunk async handler.
5. Mutation helpers with inbuild [immerjs](https://github.com/immerjs/immer).

Let's move to the code part and see how this package standardizes reducers.

Add Redux Toolkit to your project by using the below command

```
yarn add @reduxjs/toolkit
```

### Redux Store

Creating a store using the redux toolkit is super simple! Check the below code

{% gist
https://gist.github.com/Nilanth/36ccb9125021be2d0659929157caaabf
%}

`configureStore` enables redux-thunk and redux dev tools by default. Not required to configure it manually by using middleware. But if you plan to use redux-saga or any other side effects manager, You can configure through the middleware as below

{% gist
https://gist.github.com/Nilanth/eb8a67a9e07c6bb199b9f435a1eb5aec
%}

Now your redux store is ready for action. Next, add it to the `<Provider/>` as below

{% gist
https://gist.github.com/Nilanth/0bbc6e3aad61d98cad7fbe6a06bce5bf
%}

Next reducer setup? No !!. It's time to Slice.

### Create Slice API

Redux Toolkit provides an API called `createSlice`. Which handles the initial state, automatically creates action types and creators. And no **more switch cases**. We are also not required to write action types and creators manually. Check the below code for the new slice reducer

{% gist
https://gist.github.com/Nilanth/3a9c07204b126fa00e91ead2f07ee46f
%}

Let’s breakdown each createSlice options

**initialState:** Initial state of the slice

**name:** Name of the slice. (Reducer Name)

**reducers:** Handles the action type, Like the switch case which we have used in reducers.

createSlice also have `extraReducer`. This option is to handle actions types that are not generated by the current slice.

Now you can interact with the redux store and slice from React Components as below

{% gist
https://gist.github.com/Nilanth/4319eaa10945019ced8eda826a8709c3
%}

### Feature Folders

Feature Folder is not related to the redux toolkit. But this is also a recommended way by redux to structure your React Redux App. The feature Folder approach is grouping your features in a single folder.

The feature folder includes components and a single file for the redux toolkit `createSlice` API for the particular feature. Redux related action creators, types need to add in a single file, not in multiple files.

![file-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz2k4w7b4j0i85tbxu21.png)

**`/app`** Global app setup and Layout configuration used by the entire app.

**`/common`** Reusable helpers and components

**`/features`** Components related to the specific feature and its slice logic.

### Resources

[Redux Toolkit GitHub repository](https://github.com/reduxjs/redux-toolkit)

[Duck Redux Pattern](https://github.com/erikras/ducks-modular-redux)

### Conclusion

Redux toolkit provides a convenient and standard way of writing reducers. I hope you have found this useful. Thank you for reading.

Get more updates on [Twitter](https://twitter.com/Nilanth).

**You can support me [by buying me a coffee](https://buymeacoffee.com/nilanth) ☕**

## eBook

[Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples](https://nilanth.gumroad.com/l/ztehh)

[ReactJS Optimization Techniques and Development Resources](https://nilanth.gumroad.com/l/NYkdN)

## More Blogs
1. [Don't Optimize Your React App, Use Preact Instead
](https://dev.to/nilanth/dont-optimize-your-react-app-use-preact-instead-30og)
2. [5 Packages to Optimize and Speed Up Your React App During Development](https://dev.to/nilanth/5-packages-to-optimize-and-speed-up-your-react-app-during-development-4h5f)
3. [How To Use Axios in an Optimized and Scalable Way With React](https://dev.to/nilanth/how-to-use-axios-in-an-optimized-and-scalable-way-with-react-518n)
4. [15 Custom Hooks to Make your React Component Lightweight](https://dev.to/nilanth/15-custom-hooks-to-make-your-react-component-lightweight-17cd)
5. [10 Ways to Host Your React App For Free](https://dev.to/nilanth/10-ways-to-host-your-react-app-for-free-27ga)
6. [How to Secure JWT in a Single-Page Application](https://dev.to/nilanth/how-to-secure-jwt-in-a-single-page-application-cko)
7. [React 18 Alpha: A Quick Overview](https://dev.to/nilanth/react-18-alpha-a-quick-overview-349n)
8. [Redux Auth Starter: A Zero Config CRA Template](https://dev.to/nilanth/redux-auth-starter-a-zero-config-cra-template-9c0)