web-dev-qa-db-fra.com

Objets d'état (profond) complexes React-Redux

Étant donné que mon état redux initial est:

const state = {
  currentView: 'ROOMS_VIEW',
  navbarLinks: List([
    {name: 'Rooms', key: 'ROOMS_VIEW'},
    {name: 'Dev', key: ''}
  ]),
  roomListsSelected: {group: 0, item: 0},
  roomLists: [
    {
      name: "Filters",
      expanded: true,
      listItems: [
        { icon: 'images/icon-warning.svg', name: 'Alerts', filter: room => room.hasAlert },
        { icon: 'images/icon-playlist.svg', name: 'In Progress', filter: room => room.progress > 20 },
        { icon: 'images/icon-playlist.svg', name: 'Almost Done', filter: room => room.progress > 90 },
        { icon: 'images/icon-playlist.svg', name: 'Complete', filter: room => room.status === 'complete' },
        { icon: 'images/icon-playlist.svg', name: 'Recently Completed', filter: room => false },
        { icon: 'images/icon-playlist.svg', name: 'All Rooms', filter: room => true }
      ]
    }
  ],
  rooms: List(generateRooms())
}

J'ai besoin de faire un réducteur qui fait ça:

state.roomList[n].expanded = !state.roomList[n].expanded

Je suis nouveau dans l'utilisation d'un flux de travail Redux et la meilleure façon de résoudre ce problème est de faire de roomList un objet immutable.js ou d'écrire du code pour créer un clone profond de mon objet d'état.

State.roomList recevra également de nouvelles données des futures fonctionnalités.

Summery/Question: Quelle est la meilleure façon de renvoyer un nouvel objet d'état dans un réducteur lorsque vous effectuez des modifications comme celle-ci au plus profond de l'état, ou dois-je changer la structure de l'objet d'état Redux?

Ce que j'ai fait Au final, Immutable semble être la voie à suivre. Il y a quelques astuces avec Immutable pour réduire le temps de rendu des réactions et il répond à toutes les exigences du projet. De plus, il est suffisamment tôt dans le projet pour utiliser une nouvelle bibliothèque sans apporter de changements majeurs.

reactjsreduximmutable.js
30
Steven Bayer

D'abord, Redux idiomatique vous encourage à "normaliser" votre état et à l'aplatir autant que possible. Utilisez des objets saisis par des ID d'élément pour permettre des recherches directes d'éléments, utilisez des tableaux d'ID pour indiquer la commande, et partout où un élément doit se référer à un autre, il stocke uniquement l'ID de l'autre élément au lieu des données réelles. Cela vous permet d'effectuer des recherches et des mises à jour plus simples d'objets imbriqués. Voir la question Redux FAQ sur les données imbriquées .

En outre, il semble que vous stockiez actuellement un certain nombre de fonctions directement dans votre état Redux. Techniquement cela fonctionne, mais ce n'est certainement pas idiomatique, et cassera des fonctionnalités comme le débogage de voyage dans le temps, donc c'est fortement déconseillé. Le Redux FAQ donne plus d'informations sur pourquoi le stockage de valeurs non sérialisables dans votre état Redux est une mauvaise idée .

modifier:

En guise de suivi, j'ai récemment ajouté une nouvelle section aux documents Redux, sur le sujet "Structuring Reducers" . En particulier, cette section comprend des chapitres sur "Normalizing State Shape" et "Updating Normalized Data" , ainsi que "Immutable Update Patterns" .

50
markerikson

Composition du réducteur: Décomposez vos réducteurs en morceaux plus petits afin qu'un réducteur soit suffisamment petit pour gérer une structure de données simple. par exemple. Dans votre cas, vous pouvez avoir: roomListReducerlistItemsReducerlistItemReducer. Ensuite, à chaque réducteur, il vous sera beaucoup plus facile de lire la partie de l'état avec laquelle vous avez affaire. Cela aide beaucoup parce que chacun de vos réducteurs traite de petites données que vous n'avez pas à vous soucier de choses comme `` dois-je copier en profondeur ou copier peu profondément ''.

Immuable Personnellement, je n'utilise pas immutable.js parce que je préfère traiter des objets simples. et il y a juste trop de code à changer pour adopter une nouvelle API. Mais l'idée est, assurez-vous que vos changements d'état sont toujours effectués via des fonctions pures. Par conséquent, vous pouvez simplement écrire vos propres fonctions d'assistance pour faire ce que vous voulez, assurez-vous simplement qu'elles sont testées de manière approfondie lorsque vous traitez des objets complexes.

Ou tout simplement, vous pouvez toujours copier en profondeur votre état dans chaque réducteur, muter dans la copie puis renvoyer la copie. Mais ce n'est évidemment pas la meilleure façon.

6
xiaofan2406