javascript - React redux 组件之间共享对象

Question

我从 Angular 转向 React，因此正在摸不着头脑，试图弄清楚如何在两个组件之间共享对象。

当我更新对象时，我遇到了麻烦，因为新值不会跨组件更新。由于我不允许引用同一个对象(由于 Redux 中的不变性)，我很难弄清楚如何最好地做到这一点。

实现我想要的目标的正确、最简单和最好的方法是什么？这是一个例子:

(这个插图并不代表我的应用程序，但已经过简化，以便更容易理解我想要实现的目标。我的 React 组件嵌套在多个层中，这就是为什么我认为 Redux 将是解决方案)

...这是到目前为止我构建 redux 对象的方式:

export default function reducer(state = {
  blocks: [{ title: '', description: '' }],
  currentBlock: null,
}, action) {
  switch (action.type) {

    case 'UPDATE_BLOCK_TITLE':
      return {...state,
        blocks: state.blocks.map((block, i) => block === action.payload.block ? {...block, title: action.payload.title} : block)
      }

    case 'SET_CURRENT_BLOCK':
      return {...state, currentBlock: action.payload }

  }
  return state;
}

我的 UPDATE_BLOCK_TITLE 案例确保更新对象中的字段，而我的 SET_CURRENT_BLOCK 则更新要在右侧显示的 block 。

如果每次更改标题时都必须更新标题和 currentBlock，我发现有点麻烦，尤其是来自 Angular，这种事情很容易实现。

也许我正在考虑以错误的方式实现它？请让我知道实现这一目标的最佳方法是什么。

Answer 1

Redux 方法是保持数据标准化。

根据您的用例，您应该仅在 currentBlock 中保留 block.id(或任何其他 block 标识符)。这样做 - 当您修改 blocks 存储本身时，所有相关组件都将收到更新的 block ，因为它们将依赖关系 block.id。

How do I organize nested or duplicate data in my state?

Data with IDs, nesting, or relationships should generally be stored in a “normalized” fashion: each object should be stored once, keyed by ID, and other objects that reference it should only store the ID rather than a copy of the entire object. It may help to think of parts of your store as a database, with individual “tables” per item type. Libraries such as normalizr and redux-orm can provide help and abstractions in managing normalized data.

我建议你浏览一下有关 Structuring Reducers 的 Redux 官方文档。它写得很好，结构也很好，因此您将从 Redux 创建者那里学到主要概念和最佳实践。