javascript - 基于 redux 状态控制 react 组件的正确方法是什么

Question

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

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

个人作业如下所示:

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

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

一个具体的例子是一个 react 组件，用于显示一个单独的分配，它有一个选择器/单选按钮来改变状态:

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

我可以看到的选项是:

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

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

2) 像这样根据 redux 状态设置本地组件状态:

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

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

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

3) 根据 props.assignment.status 设置选择器的值，并在选择器的 onChange 处理程序中克隆 assignment 对象，更新 status 属性，然后立即发送 updateAssignment() 操作，将本地创建的 assignment 对象合并到状态中。

之后将 POST 请求发送到服务器，如果它以某种方式失败，则将 redux 状态恢复到之前的状态，基本上删除本地添加的 assignment 对象。也许这看起来有点老套？

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

Answer 1

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

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

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

在 shouldComponentUpdate 中，您需要阻止在这个 redux 更新之后发生的更新:您将检查 props 的值是否已更改。

在 componentDidUpdate 中，如果 Prop 发生变化，您将更新状态。

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