Redux Toolkit - createSlice

Redux Toolkit - createSlice

Structure

• Use descriptive name for action type prefixes
• Define typed initialState with satisfies
• Export actions and reducer separately

// ✅ GOOD
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface MyState {
  value: number;
  status: "idle" | "loading" | "error";
}

const initialState: MyState = {
  value: 0,
  status: "idle",
};

const mySlice = createSlice({
  name: "myFeature",
  initialState,
  reducers: {
    setValue: (state, action: PayloadAction<number>) => {
      state.value = action.payload;
    },
    setStatus: (state, action: PayloadAction<MyState["status"]>) => {
      state.status = action.payload;
    },
  },
});

export const { setValue, setStatus } = mySlice.actions;
export default mySlice.reducer;

Registration