Redux Toolkit: Come implementarlo in React

Che cosa realizzeremo in questo progetto ?

In questo progetto andremo a realizzare un'applicazione in cui implementeremo Redux Toolkit per la gestione dei nostri state

Che cos'è Redux Toolkit ?

Redux è un framework, uno dei più diffusi, per la gestione degli state. Per chi conoscesse l'utilizzo dello useReducer possiamo dire che Redux è una soluzione simile ma molto più performante e avanzata. A oggi la soluzione migliore però è sicuramente Redux Toolkit che si presenta come una versione semplificata ma che mantiene tutte le funzioni del Framework di Redux e anzi le va a estendere.

Come implementare Redux ?

L'implementazione di Redux ricorda molto il pattern implementativo dello useReducer in combinazione dello useContext.

Andiamo a definire il nostro store ovvero l'oggetto contenente tutti i dati che vogliamo condividere tra i nostri componenti. Per fare questo usiamo la funzione configureStore che ritorna un oggetto di reducer (che andremo a definire successivamente). Poi non ci rimane che exportarlo.

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./reducers/cart-reducer";
export const store = configureStore({
  reducer: {
    counter: cartReducer,
  },
});

Ora ci spostiamo nel nostro index.js, importiamo Provider da react-redux e gli passiamo il nostro store. Ora tutti i componenti potranno accedere ai valori nel nostro store.

import React from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";
import { store } from "./redux/store";
import { Provider } from "react-redux";
const root = createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <Provider store={store}>
        <App />
    </Provider>
  </React.StrictMode>
);

Creare un Reducer

Ora vediamo come possiamo creare un reducer o meglio un Slice

import { createSlice } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState = { value: 0 } as CounterState

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++
    },
    decrement(state) {
      state.value--
    },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

Come accedere ai valori del reducer

Per accedere ai nostri valori ci basterà utilizzare l'hook useSelector che importandolo da react-redux

Mentre per le nostre action ci basterà importarle dal nostro slice e usere useDispatch

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

const Component = () => {
const {value} = useSelector(state => state.counter)
const dispatch = useDispatch()

const handleClick = () => {
    dispatch(increment())
}
 //....JSX
}