React: implementare un filtro di ricerca con Redux

In questa guida parleremo di come implementare una funzionalità di filtro di ricerca in un’applicazione React, utilizzando Redux per la gestione centralizzata dello stato. L’esempio sarà semplice ma sufficiente a mostrarti i concetti fondamentali che puoi applicare a progetti più complessi.

Obiettivo della guida

L’obiettivo di questa guida è quello di implementare un sistema di ricerca che filtra dinamicamente i dati in un’app React. Utilizzeremo Redux per gestire lo stato centrale della ricerca, il che permette una gestione globale dei dati filtrati e consente di tenere traccia dello stato della ricerca in tutto il progetto.

Il nostro progetto

L’applicazione consisterà in una lista di articoli (simile a un blog o un elenco di prodotti), con un campo di ricerca che permetterà agli utenti di filtrare la lista in tempo reale. Ogni volta che l’utente scrive nel campo di ricerca i risultati si aggiorneranno immediatamente in base ai criteri di ricerca.

Prerequisiti

Prima di iniziare, assicurati di avere un ambiente di sviluppo pronto con React e Redux. Se non hai ancora installato Redux puoi farlo tramite il comando:

npm install redux react-redux

Creazione del progetto React

Iniziamo creando un progetto React di base. Apri il terminale e usa il comando create-react-app:

npx create-react-app filtro-ricerca
cd filtro-ricerca

Una volta creato il progetto, installiamo anche Redux e React-Redux:

npm install redux react-redux

Impostazione di Redux

Redux è uno strumento per gestire lo stato dell’applicazione in modo centralizzato. Iniziamo creando i file necessari per gestire lo stato del filtro di ricerca. Cominceremo con la configurazione di Actions, Reducer, e Store.

Creazione degli Actions

Gli Actions sono semplicemente oggetti che rappresentano l’intenzione di modificare lo stato. Nel nostro caso avremo un’azione per aggiornare il testo della ricerca. Crea un file src/redux/actions.js con il seguente codice:

// Azione per aggiornare il testo della ricerca
export const setSearchQuery = (query) => {
    return {
        type: 'SET_SEARCH_QUERY',
        payload: query,
    };
};

Creazione del Reducer

Il Reducer è la funzione che gestisce lo stato in base alle azioni inviate. Creiamo un file src/redux/reducer.js dove gestiremo il nostro stato di ricerca.

const initialState = {
    searchQuery: '',
    items: [
        { id: 1, name: 'Articolo 1' },
        { id: 2, name: 'Articolo 2' },
        { id: 3, name: 'Articolo 3' },
        { id: 4, name: 'Articolo 4' },
    ],
};
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'SET_SEARCH_QUERY':
            return {
                ...state,
                searchQuery: action.payload,
            };
        default:
            return state;
    }
};
export default reducer;

In questo caso, il nostro stato contiene due proprietà:

• searchQuery: la stringa di ricerca.
• items: una lista di articoli che vogliamo visualizzare e filtrare.

Creazione dello Store

Ora creiamo lo Store di Redux che centralizzerà il nostro stato. Crea il file src/redux/store.js:

import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;

Configurazione di React-Redux

Per collegare il nostro Store Redux all’applicazione React dobbiamo utilizzare il componente Provider di React-Redux. Apri il file src/index.js e aggiungi il seguente codice:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './redux/store';
// Avvolgi l'app nel provider per accedere allo store Redux
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

Creazione del componente di ricerca

Ora che abbiamo impostato Redux, possiamo creare un componente di ricerca che aggiornerà il searchQuery nello store Redux ogni volta che l’utente digita qualcosa. Aggiungi un nuovo file src/components/Search.js con il seguente codice:

import React from 'react';
import { useDispatch } from 'react-redux';
import { setSearchQuery } from '../redux/actions';
const Search = () => {
    const dispatch = useDispatch();
    const handleChange = (event) => {
        dispatch(setSearchQuery(event.target.value));
    };
    return (
        <div>
            <input
                type="text"
                placeholder="Cerca articoli..."
                onChange={handleChange}
            />
        </div>
    );
};
export default Search;

Il componente Search è un campo di input che ascolta il cambiamento del valore e, ogni volta che l’utente digita qualcosa, aggiorna il searchQuery nello store Redux.

Visualizzazione dei risultati filtrati

Ora che abbiamo il nostro stato di ricerca possiamo utilizzarlo per filtrare la lista degli articoli. Aggiungi un componente ItemList che mostri gli articoli filtrati in base al testo di ricerca.

Crea il file src/components/ItemList.js con il seguente codice:

import React from 'react';
import { useSelector } from 'react-redux';
const ItemList = () => {
    const { items, searchQuery } = useSelector(state => state);
    const filteredItems = items.filter(item =>
        item.name.toLowerCase().includes(searchQuery.toLowerCase())
    );
    return (
        <ul>
            {filteredItems.map(item => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
};
export default ItemList;

In questo componente, usiamo useSelector per ottenere lo stato dal nostro store Redux. Poi filtriamo la lista degli articoli in base alla searchQuery e mostriamo solo quelli che corrispondono al termine di ricerca.

Combinazione di Search e ItemList in App

Ora possiamo unire tutto insieme nel componente principale App.js. Apri src/App.js e sostituisci il contenuto con il seguente codice:

import React from 'react';
import Search from './components/Search';
import ItemList from './components/ItemList';
const App = () => {
    return (
        <div>
            <h1>Lista di Articoli</h1>
            <Search />
            <ItemList />
        </div>
    );
};
export default App;

Test dell’applicazione

Ora che abbiamo completato l’applicazione, possiamo avviare il server di sviluppo:

npm start

Accedi a http://localhost:3000 nel tuo browser. Dovresti vedere un campo di ricerca sopra la lista degli articoli. Man mano che digiti nel campo di ricerca, la lista degli articoli verrà aggiornata automaticamente per mostrare solo gli articoli che corrispondono al termine di ricerca.

Conclusione

In questa guida abbiamo costruito un’applicazione React che integra un filtro di ricerca dinamico utilizzando Redux per gestire lo stato globale dell’applicazione. Abbiamo esaminato come creare un’azione e un reducer per gestire la query di ricerca, come configurare il nostro store Redux e come utilizzare React-Redux per connettere il nostro stato alla UI. L’interazione tra React e Redux consente di gestire il filtro di ricerca in modo centralizzato.

Abbiamo iniziato configurando il progetto e creando il necessario per Redux, incluse le azioni, il reducer e lo store. Successivamente abbiamo creato il componente Search, che consente all’utente di immettere un testo di ricerca, e il componente ItemList, che visualizza i risultati filtrati. Ogni volta che l’utente digita nel campo di ricerca lo stato della query viene aggiornato tramite Redux, e la lista degli articoli viene filtrata automaticamente per riflettere i nuovi criteri di ricerca.

Questa implementazione è solo un esempio di come React e Redux possano lavorare insieme per gestire funzionalità interattive. Sebbene il filtro di ricerca sia un caso semplice, i concetti che abbiamo trattato possono essere facilmente estesi a scenari più complessi, come la gestione di filtri multipli (ad esempio, per categoria, data o prezzo) o l’integrazione di un sistema di paginazione per gestire grandi volumi di dati.