在组件之间反应 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更新要在右侧显示的块。

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

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

Answer 1

Redux 的方法是保持数据规范化。

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

如何组织我所在州的嵌套或重复数据？

带有 ID、嵌套或关系的数据通常应该以“规范化”的方式存储：每个对象都应该存储一次，以 ID 为键，其他引用它的对象应该只存储 ID，而不是整个对象的副本。 将商店的某些部分视为一个数据库可能会有所帮助，每个项目类型都有单独的“表格”。 normalizr 和 redux-orm 等库可以在管理规范化数据方面提供帮助和抽象。

我建议您阅读有关Structuring Reducers的官方 Redux 文档。 它的编写和结构非常好，因此您将从 Redux 创建者那里学习主要概念和最佳实践。