web-dev-qa-db-fra.com

Redux: quelle est la bonne façon de filtrer un tableau de données dans réducteur?

je veux filtrer un tableau à la recherche SEARCH_TEXT est une action de modification sur laquelle je suis confondu, c'est comment je retourne l'état lorsque la touche Suppr est enfoncée et que le texte devient vide, je suppose que je pourrais utiliser l'état initial dans l'instruction else mais mon penchant est-ce que c'est faux? quand je reviens juste dire qu'il a tout été prêt a été manipulé dans la déclaration si.

exemple simple.

merci d'avance.

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
      }
javascriptredux
31
user3224271

Rappelez-vous toujours que l'État est votre "source de vérité". Méfiez-vous de l'élimination de l'état sur la base d'un filtre temporaire. Une fois que vous faites cela, ces articles sont partis. (Le seul moyen de les récupérer consiste à réinitialiser votre état sur l'état initial, ce qui peut ne pas être idéal.)

Une meilleure approche consiste à conserver votre liste d’éléments telle quelle et simplement à stocker le texte de recherche.

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
            });
    }
}

Bien que votre état ne contienne pas la liste filtrée, il vous dit tout ce que vous devez savoir pour construire la liste filtrée.

En supposant que vous utilisiez React, votre "composant intelligent" peut être configuré avec la fonction mapStateToProps() suivante:

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

Si vous avez besoin de cette liste filtrée à plusieurs endroits, envisagez de créer une fonction de "sélecteur", comme illustré dans l'exemple du panier d'achat Redux. https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/cart.js

Cela ressemblerait à ceci:

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

Pour une approche plus avancée des sélecteurs, consultez la bibliothèque de resélection.

https://github.com/rackt/reselect

82
David L. Walsh

OMI, le bon endroit pour filtrer les données ne se trouve pas directement dans les réducteurs mais dans les sélecteurs .

De redux docs:

Données informatiques dérivées

Reselect est une bibliothèque simple permettant de créer des fonctions de sélecteur mémorisables et composables. Les sélecteurs de resélection peuvent être utilisés pour calculer efficacement les données dérivées à partir du magasin Redux.

J'utilise actuellement des sélecteurs pour filtrer et trier les données.

  1. Aucune répétition de données dans l'état. Vous n'avez pas besoin de stocker une copie des éléments filtrés.
  2. Les mêmes données peuvent être utilisées dans différents composants, chacun utilisant un filtre différent par exemple.
  3. Vous pouvez combiner le sélecteur en appliquant de nombreux calculs de données à l'aide du sélecteur que vous avez déjà dans l'application.
  4. Si vous le faites bien, vos sélecteurs seront des fonctions pures, alors vous pourrez facilement les tester.
  5. Utilisez le même sélecteur dans de nombreux composants.
17
Horacio Alexandre Fernandes