Tilan Päivittäminen UseDispatchin Avulla

Tilaa muutetaan Reduxissa lähettämällä toiminto (action) storeen. Tämä tehdään käyttämällä useDispatch-hookia.

Toiminnon lähettäminen

Komponentin sisällä kutsutaan useDispatch ja käytetään sitä toimintojen käynnistämiseen:

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

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

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

Kun painiketta klikataan, toiminto lähetetään storeen ja tila päivittyy.

Miten se toimii

Tilan arvoa ei päivitetä suoraan. Sen sijaan lähetetään toiminto, ja Redux päättää, miten tila muuttuu reducerien avulla.

Tämä lähestymistapa pitää tilapäivitykset ennustettavina. Kaikki muutokset kulkevat saman prosessin läpi, mikä tekee sovelluksesta helpommin ymmärrettävän ja debugoitavan.