Question

我目前正试图将我的大脑包围在redux中，目前我对如何处理redux中的依赖状态有一个问题。

作为一个例子，想一下电子表格应用程序：

在单元格A1和A2中，用户输入值。

单元格A3现在具有以下依赖状态（= Sum（A1; A2））

现在，当用户在A1 =＆gt;中输入“2”时我们发送“UpdateCellAction：A1 = 2” 然后，他将“4”输入A2 =＆gt;我们发送“UpdateCellAction：A2 = 4”

但是由于这些变化，我在A3中的公式必须通过查看2和4的总和来做出反应并修改状态对象，这是6

在Redux中如何完成这样的事情？而且，如果有另一个Cell B22（无论如何）根据A3，A2和A1计算另一个值怎么办？（那个州将取决于A1，A2和A3）

Answer 1

这是一个常见的用例。您正在寻找的是反应/重选库：

从重新选择github项目页面：

选择器可以计算派生数据，允许Redux存储最小可能状态。

选择器效率很高。除非其参数之一发生变化，否则不会重新计算选择器。

选择器是可组合的。它们可以用作其他选择器的输入。

Answer 2

如果您将每个单元格视为单个组件，则您的问题不明确。

如果每个单元格都是单个组件：

每次编辑每个单元格时，都会使用Redux调度操作，并将该值保存在Redux存储中的唯一键下。您还可以使用mapStateToProps获取要在本地计算的其他组件的所有值。

...

/**
* Redux mappings
*/
const mapStateToProps = (state) => {
 return {
   cellA1: state.cells.cellA1,
   cellA2: state.cells.cellA2,
 };
};

const mapDispatchToProps = (dispatch) => {
 return {
   updateCell: (newCellValue) => {
     dispatch(Actions.updateCell(newCellValue));
   },
 };
};

const ConnectedCellComponent = connect(
 mapStateToProps,
 mapDispatchToProps,
)(CellComponent);

如果电子表格整体是一个组件：

您可以将所有单元格数据存储在本地状态对象中，然后每当单元格更新时，您将调用setState（）并自动调用render（），并且所有单元格都会相应地重新计算。

Redux依赖的应用程序状态

2 个答案: