Redux: qual è il modo corretto di filtrare un array di dati nel riduttore?

Question

Voglio filtrare un array sulla ricerca SEARCH_TEXT è un'azione di modifica ciò di cui sono confuso è come restituisco lo stato quando viene premuto il tasto Canc e il testo ora diventa vuoto, immagino di poter utilizzare lo stato iniziale in l'altra affermazione, ma la mia inclinazione è che questo è sbagliato? quando torno allo stato giusto è tutto pronto manipolato nella dichiarazione if.

semplice esempio.

grazie in anticipo.

const initialState = ['hello', 'wahhh', 'yo']; 

export default function searchSimple(state = initialState, action) { 
    switch (action.type) { 
    case SEARCH_TEXT: 
     if(action.text.length > 0){ 
     return state.filter(item => 
      item.startsWith(action.text) 
     ) 
     } 
     else { 
     return state 
     } 

Answer 1

Ricorda sempre che lo stato è la tua "fonte di verità". Diffidare di eliminare lo stato sulla base di un filtro temporaneo. Una volta fatto, quegli oggetti sono spariti. (L'unico modo per farli tornare è quello di ripristinare lo stato iniziale, che potrebbe non essere l'ideale.)

Un approccio migliore è quello di mantenere l'elenco degli articoli così com'è, e semplicemente memorizzare il testo di ricerca.

const initialState = { 
    searchText: '', 
    items: [ 'hello', 'wahhh', 'yo' ] 
}; 

export default function searchSimple(state = initialState, action) { 
    switch (action.type) { 
     case SEARCH_TEXT: 
      return Object.assign({}, state, { 
       searchText: action.text 
      }); 
    } 
} 

Mentre il vostro stato non conterrà l'elenco filtrato, ti dice tutto quello che c'è da sapere per costruire l'elenco filtrato.

Supponendo che si sta utilizzando Reagire, il vostro "componente intelligente" può essere configurato con il mapStateToProps() seguente funzione:

function mapStateToProps(state) { 
    const { items, searchText } = state.searchSimple; 
    return { 
     filteredItems: items.filter((item) => item.startsWith(searchText)) 
    }; 
} 

Se avete bisogno di questo elenco filtrato in più di un luogo, prendere in considerazione la creazione di un "selettore" funzione, come dimostrato nell'esempio del carrello degli acquisti di Redux. https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/cart.js

Sarebbe simile a questa:

export function filteredItems(state) { 
    const { items, searchText } = state.searchSimple; 
    return items.filter((item) => item.startsWith(searchText)); 
} 

Per un approccio più avanzato per selettori, controllare la biblioteca Riseleziona.

https://github.com/rackt/reselect

Answer 2

IMO, il posto giusto per filtrare i dati non è direttamente nei riduttori ma nelle selettori.

Da documenti Redux:

Computing Derived Data

Riseleziona è una semplice libreria per la creazione memoized, funzioni selettore componibili. Riselezionare i selettori possono essere utilizzati per calcolare in modo efficiente i dati derivati ​​dal negozio Redux.

Attualmente sto usando selettori per filtro e sorta dati.

1. Nessuna ripetizione di dati nello stato. Non è necessario memorizzare una copia degli articoli filtrati.
2. Gli stessi dati possono essere utilizzati in diversi componenti, ognuno con un filtro diverso, ad esempio.
3. È possibile combinare il selettore applicando molti calcoli di dati utilizzando il selettore già presente nell'applicazione.
4. Se si fa bene, i selettori saranno funzioni pure, quindi è possibile testarli facilmente.
5. Utilizzare lo stesso selettore in molti componenti.