DEV Community

Cover image for Redux Toolkit - The Standard Way to Write Redux
Nilanth
Nilanth

Posted on • Updated on • Originally published at javascript.plainenglish.io

Redux Toolkit - The Standard Way to Write Redux

Redux 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 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.

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
Enter fullscreen mode Exit fullscreen mode

Redux Store

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

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

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

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

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

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

/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

Duck Redux Pattern

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.

eBook

Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples

ReactJS Optimization Techniques and Development Resources

More Blogs

  1. Don't Optimize Your React App, Use Preact Instead
  2. 5 Packages to Optimize and Speed Up Your React App During Development
  3. How To Use Axios in an Optimized and Scalable Way With React
  4. 15 Custom Hooks to Make your React Component Lightweight
  5. 10 Ways to Host Your React App For Free
  6. How to Secure JWT in a Single-Page Application
  7. React 18 Alpha: A Quick Overview
  8. Redux Auth Starter: A Zero Config CRA Template

Top comments (10)

Collapse
 
hrishikeshps profile image
Hrishikesh Sharma

Nicely done! Can you add a slightly more complex structure for a large scale project? It'll be a great help..

Collapse
 
nilanth profile image
Nilanth

Sure. Added to my list.

Collapse
 
hrishikeshps profile image
Hrishikesh Sharma

Super!! Will be waiting for that..thanks!

Collapse
 
devnazir profile image
devnazir

Nice!

Collapse
 
lowla profile image
Laureline Paris

Alohaaa thanks for sharing.
However I have a question : it seems like you break the rule of immutably regarding the update of count by affecting straight away the state ( state.count++ / state.count-- )
Is this way recommended with reduxjs/toolkit ( which would mean the toolkit abstract the good practice for people and would handle itself the return of a new value ) or is this just a mistake ?

Collapse
 
lowla profile image
Laureline Paris

After practicing a bit I had my answer:

  • createSlice and createReducer are using internally Immer ( package handling immutable data structure. ) : this is why it we can provide the updated value like so.

the toolkit is really nice however this is unfortunate that such official opinionated tool implies confusing habits ( such as re-assigning the value straight away affected ) whereas the the fundamental principal of the mature react library was enforcing the habit to not mutate directly the value pre and post hooks.

Collapse
 
nemanajay profile image
Ajay Neman

Excellent article. It has help me to revised my redux toolkit concepts. Thanks 🔥

Collapse
 
linhtch90 profile image
Linh Truong Cong Hong

Can we combine redux toolkit with saga?

Collapse
 
julio3266 profile image
Julio Valente Costa

Thanks for your article, helped me!

Collapse
 
ynaveenkmr profile image
ynaveenkmr

Hi bro... where is saga file