基于 redux 状态控制反应组件的正确方法是什么

Question

我认为这更像是一个概念/架构问题，但我将包含代码示例来帮助解释这个问题。 我有一个规范化的 redux 状态，其中实体状态切片如下所示：

entities: {
    projects: {
        [id]: {...},
        [id]: {...},
        ...
    },
    assignments: {
        [id]: {...},
        [id]: {...},
        ...
    }
}

一个单独的任务看起来像这样：

    {
        id: 1,
        name: 'assignment 1',
        status: 'active',
        deadline: '01-01-2020'
    }

我从后端数据库中获取这些数据。 我试图找出正确的方法来处理更新这些数据的过程，保持 UI 响应，并保持我的 redux 状态与后端同步。

一个具体示例是用于显示单个分配的反应组件，该组件具有选择器/单选按钮以更改以下状态：

    const statusOptions = {
        'active',
        'pending',
        'complete'
    }

我可以看到的选项是：

1) 将props.assignment.status值设置为props.assignment.status值，在props.assignment.status /selector的onChange中调度updateAssignment()动作，saga/thunk发送POST请求，立即触发fetchAssignment()动作将发送 GET 请求并更新 redux 状态，然后组件将重新呈现。

这样做的问题是 redux 更新花费的时间太长，因此 UI 显得滞后，并且受控输入将恢复到旧的选择，直到传入新的 props。

2) 根据 redux 状态设置本地组件状态，如下所示：

    state = { status: this.props.assignment.status }

然后根据本地状态设置选择器的值，这将在值更改时提供近乎即时的 UI 更新。

我在这里看到的问题是我很确定这是一个反模式，我必须使用getDerivedStateFromProps()或类似的东西来确保本地状态与 redux 状态保持同步。 另外，我真的很喜欢“单一事实来源”的想法，我觉得这个选项会使它无效。

3）根据props.assignment.status设置props.assignment.status的值，在props.assignment.status的onChange handler中克隆assignment对象，更新status属性，然后立即发送一个updateAssignment()动作，将本地创建的assignment对象合并到状态。

之后，将 POST 请求发送到服务器，如果失败，则以某种方式将 redux 状态恢复到之前的状态，基本上删除本地添加的assignment对象。 虽然这似乎有点hacky？

是否有任何商定的最佳实践来更新 redux 数据，同时保持单一的事实来源、活泼的 UI 和干净的代码？

Answer 1

(2) 的第一部分在我看来是正确的方法。

在 ComponentDidMount 中（或者更好的是在 App.js 中，当应用程序启动时）您从数据库中获取数据到 redux 状态，并从中设置本地状态。

然后您在本地维护数据，并调度将更新 redux 状态和数据库的正确操作。

在 shouldComponentUpdate 中，您需要防止在此 redux 更新之后发生更新：您将检查 props 的值是否已更改。

在 componentDidUpdate 中，如果道具更改，您将更新状态。

最后要注意的是在其他智能手机上运行的应用程序的其他实例或其他数据源（如果可能发生）发生数据库更改后获取数据更新。 例如，在 firebase 中，您可以通过监听相关的应用程序更改来做到这一点。 我不知道这在这里是否相关。