❮ Previous Next ❯

Redux Toolkit

  • This lesson introduces Redux Toolkit and explains how it simplifies state management in React applications.


  • Redux Toolkit


    Why Redux Toolkit?

    Redux Toolkit (RTK) simplifies Redux.

    Problems with old Redux:

    • Too much boilerplate

    • Complex setup

    RTK Benefits:

     ✅ Less code
     ✅ Better performance
     ✅ Built-in best practices

    Creating Slices

    A slice contains:

    • State

    • Reducers

    • Actions

    Example:

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: state => {
      state.value += 1;
    }
  }
});

  • Using Redux Toolkit with React

    Steps:

    1. Create store

    2. Provide store using <Provider>

    Use useSelector and useDispatch

const count = useSelector(state => state.counter.value);
const dispatch = useDispatch();
❮ Previous Next ❯