在组件之间反应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方法是保持数据规范化。

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

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

  

具有ID，嵌套或关联关系的数据通常应以“规范化”的方式存储：每个对象应存储一次，并以ID为键，其他引用该对象的对象应仅存储ID，而不是ID的副本。整个对象。将商店的各个部分视为数据库，可能会有所帮助，每种商品类型都有单独的“表格”。诸如normalizr和redux-orm之类的库可以为管理标准化数据提供帮助和抽象。

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