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

问题描述

鉴于我最初的 redux 状态是:

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.

总结/问题:在状态中进行这样的更改时，在减速器中返回新状态对象的最佳方法是什么，或者我应该更改 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 似乎是要走的路.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 FAQ 问题.

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 FAQ 提供了一些关于 为什么在 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屋！