Redux toolkit

luhan

Member

Joined:

2024-07-08 13:08:47

Redux is a powerful state management tool for complex React applications, but it can also feel boilerplate-heavy. Here's where Redux Toolkit swoops in to simplify your life.

Redux Toolkit is an official add-on that streamlines Redux development. It provides utilities to handle common tasks, saving you time and code.

**Think of it as a cheat sheet:** Redux Toolkit offers pre-built functions for setting up stores, creating reducers with simplified immutable updates, and even combining reducers for a more organized state structure.

Image preview

luhan

Member

Joined:

2024-07-08 13:09:12

**Benefits of using Redux Toolkit:**

*

**Faster development:** Reduced boilerplate code means you can focus on core application logic.

*

Cleaner and more concise code makes your app easier to understand and maintain.

*

**Fewer errors:** Redux Toolkit helps prevent common mistakes associated with manual Redux setup.

jenny

Member

Joined: 2025-08-24 15:11:06

2024-07-09 14:14:07

@"luhan"#p638 I remember my first encounter of state management, I was so confused as I have mastered manipulating real dom with JavaScript and jquery. The idea of a virtual dom and state management seek like rocket science to me at the time.

Lydia

Member

Joined:

2024-07-10 05:02:06

I still dont understand this state management matter. Una weldone, I only do backend, I guess it is a frontend thing.

bennyflipy

Member

Joined:

2024-07-10 05:03:02

I have not done any big react thing yet, so I just stick to the normal useState hook for now. This redux looks very complicated to me.

luhan

Member

Joined:

2024-07-10 09:47:59

@"Lydia"#p780 yeah, it is a frontend thing😊

luhan

Member

Joined:

2024-07-10 09:48:41

@"bennyflipy"#p781 when you have the opportunity, try to check out context API, you will love it.

Awsome123

Member

Joined:

2024-07-10 10:09:20

@luhan do you have any small small code to share on thi to help me learn this redux better, all the big big code i dey see dey fear me!

luhan

Member

Joined:

2024-07-10 13:43:39

@"Awsome123"#p809 hmm, let me see…

```
// authSlice.ts
import { createSlice } from "@reduxjs/toolkit"
const initialState = {
auth: {
token: null as string | null,
isSignedIn: false,
name: "" as string,
phoneNumber: 0 as number,
email: "" as string,
role: "personal" as "personal" | "business"
}
}
const authSlice = createSlice({
name: "auth",
initialState,
reducers: {
signUp: (state, action) => {
const { name, email, phoneNumber, role } = action.payload;
state.auth.role = role;
state.auth.isSignedIn = true;
state.auth.name = name;
state.auth.phoneNumber = phoneNumber;
state.auth.email = email;
},
}
})
export const { signUp } = authSlice.actions;
export default authSlice.reducer;
```

here, I declare my initial state. think of initial state as the first variable in a usestate, so in the signup reducer I am setting those variables to a data.

luhan

Member

Joined:

2024-07-10 13:43:58

@"luhan"#p909 if you look at the things in the signup reducer, you will see that they are basic information you collect from the user to sign up

Forums

Redux toolkit