React Native – installazione Redux Toolkit

Redux è senza dubbio una delle librerie per la gestione dello stato più usata in progetti React Native. In questa breve guida mostro i principali passaggi e sintassi per usare questa libreria nell’ultima versione Toolkit che estende e semplifica l’implementazione della stessa.
Per maggiori info riguardo Redux Toolkit: https://redux-toolkit.js.org/

Installare le dipendenze necessarie

Per utilizzare Redux toolkit dobbiamo installare nel nostro progetto le seguenti dipendenze:

$npm install react-redux

$npm install @reduxjs/toolkit

Creare Reducer e azioni

Una delle principali novità introdotte con Toolkit è la possibilità di creare il reducer e le relative azioni attraverso un’unica funzione chiamata createSlice( ). La sintassi è la seguente:

import { createSlice } from '@reduxjs/toolkit';

export const homeStore = createSlice({
  name: 'home',
  initialState: [],
  reducers: {
    addProduct(state, action) {
      state.push(action.payload);
    },
    deleteProduct(state, action) {
      const index = state.findIndex((p) => p.id === action.payload);
      state.splice(index, 1);
    },
  },
});

export const {addProduct, deleteProduct} = homeStore.actions;

export default homeStore.reducer;

Una cosa importante da notare è l’aggiornamento dello stato. Grazie a Redux Toolkit non dobbiamo usare l’immutabilità per aggiornare lo stato ma possiamo agire direttamente su di esso come vediamo ad esempio nella riga 8 (state.push(action.payload)). Questo è possibile grazi ad Immer.js che è direttamente incluso in Toolkit.

Configurazione store

Per prima cosa creiamo lo store utilizzando combineReducers e configureStore. La sintassi è la seguente:

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import homeReducer from '../Pages/home/store/homeStore';


const rootReducer = combineReducers({
  home: homeReducer,
//altri reducers...
});

const store = configureStore({ reducer: rootReducer });

export default store;

Successivamente dobbiamo wrappare l’intera app con Provider fornito da ‘react-redux’:

import React from 'react';

import { Provider } from 'react-redux';
import store from './store/store';

const App: () => React$Node = () => {
  return (
    <Provider store={store}>
      <YourApp />
    </Provider>
  );
};

export default App;

Related Posts

Agosto 29, 2021

React Native- Primi passi con le animazioni

Marzo 16, 2021

React Native – createContex( ) e useContex( )

Febbraio 15, 2021

React Native – come cambiare il font