Updating State with useDispatch

To change state in Redux, you send an action to the store. This is done using the useDispatch hook.

Dispatching an Action

Inside a component, call useDispatch and use it to trigger actions:

import { useDispatch } from 'react-redux';
import { increment } from './counterSlice';

function Counter() {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(increment())}>
      Increase
    </button>
  );
}

When the button is clicked, the action is sent to the store and the state is updated.

How It Works

You don't update state directly. Instead, you dispatch an action, and Redux decides how the state should change using reducers.

This approach keeps state updates predictable. All changes go through the same flow, which makes the application easier to understand and debug.