React-Redux复杂(深度)状态对象 [英] React-Redux complex (deep) state objects

问题描述

鉴于我的初始还原状态为:

Given my initial redux state is :

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

我需要做一个减速器来做到这一点:

I need to make a reducer that does this:

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

我对使用Redux工作流程并不陌生，解决此问题的最佳方法是将roomList设置为immutable.js对象，或编写一些代码以对我的状态对象进行深层克隆.

I am new to using a Redux workflow and the best way to solve this is to make roomList an immutable.js object or write some code to make a deep clone of my state object.

state.roomList还将从将来的功能中推送新数据.

Also state.roomList will have new data pushed to it from future features.

摘要/问题:当在状态深处进行这样的更改时，在reducer中返回新状态对象的最佳方法是什么，还是应该更改Redux状态对象的结构?

Summery / Question: What is the best way to return a new state object in a reducer when making changes like this deep in the state, or should I change the structure of the Redux state object?

我所做的最后，不变"似乎是一条路. Immutable有一些技巧可以减少反应渲染时间，并且可以满足所有项目要求.此外，在项目中尽早使用新库而无需进行重大更改.

What I did In the end Immutable seems the way to go. There are some tricks with Immutable to reduce react rendering time and it meets all the project requirements. Also it is early enough in the project to use a new library without making major changes.

推荐答案

首先，惯用的Redux鼓励您规范化"您的状态并将其尽可能扁平化.使用以项目ID为关键字的对象可以直接查找项目，使用ID数组表示顺序，并且在一个项目需要引用另一个项目的任何地方，它仅存储另一个项目的ID而不是实际数据.这使您可以更简单地查找和更新嵌套对象.参见关于嵌套数据的Redux常见问题解答.

First, idiomatic Redux encourages you to "normalize" your state and flatten it as much as possible. Use objects keyed by item IDs to allow direct lookups of items, use arrays of IDs to denote ordering, and anywhere that one item needs to refer to another, it only stores the ID of the other item instead of the actual data. That allows you to do simpler lookups and updates of nested objects. See the Redux FAQ question on nested data.

另外，看起来您当前正在直接在Redux状态下存储许多函数. 从技术上来说是可行的，但绝对不是惯用语言，并且会破坏时间旅行调试等功能，因此不鼓励使用. Redux常见问题解答提供了有关

Also, it looks like you're currently storing a number of functions directly in your Redux state. Technically that works, but it's definitely not idiomatic, and will break features like time-travel debugging, so it's heavily discouraged. The Redux FAQ gives some more info on why storing non-serializable values in your Redux state is a bad idea.

作为后续，我最近在Redux文档中添加了新的部分，主题为构造减速器" .特别是，本节包括有关规范化状态形状" 的章节.和更新规范化数据" ，以及不可变的更新模式" .

As a follow-up, I recently added a new section to the Redux docs, on the topic of "Structuring Reducers". In particular, this section includes chapters on "Normalizing State Shape" and "Updating Normalized Data", as well as "Immutable Update Patterns".

这篇关于React-Redux复杂(深度)状态对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！