Redux toolkit

luhan

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.

luhan

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.

dhtml

luhan 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

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

luhan

Lydia yeah, it is a frontend thing😊

bennyflipy

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

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

Awsome123

@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

Awsome123 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

luhan 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