功能组件 props/state/store 未在功能中更新 - 什么是可行的替代方案？答案

【问题标题】：Functional component props/state/store not updated in function - what's a viable alternative?功能组件 props/state/store 未在功能中更新 - 什么是可行的替代方案？
【发布时间】：2020-04-08 23:09:12
【问题描述】：

首先描述一下我需要实现的目标。我在前端（React）中显示主要对应于数据库行的信息，用户可以对这些对象执行常规的 CRUD 操作。但是，我还在发送到前端的 JSON 中添加了一些虚拟行，因为有些对象是“默认值”，除非用户真正想要修改它们，否则不应将它们插入数据库。所以我需要做的是一旦用户想要在前端修改一个“默认”对象，我首先必须将该对象发布到一个特定的端点，将它从常量复制到数据库，然后再跟进请求修改该行。

其次，围绕此的架构。为了在前端存储行的状态，我通过 easy-peasy 使用 Redux，并且我有一个 thunk 用于在修改之前进行第一次保存。一旦用户想要在 UI 中的任何位置编辑“默认”对象（大约有 20 种不同的编辑对象的方法），程序的流程如下所示：

用户编辑某些内容并按“保存”
在保存函数中调用 Thunk 和 awaited
Tunk POST 到后端以将对象插入数据库并返回相应的行
后端以行的 ID 响应
Thunk 调用 action 并使用正确的 ID 更新存储中的这些对象
thunk 返回，函数指针移回修改函数
修改函数使用正确的 ID-s 发出另一个请求
修改函数使用修改后的值更新存储

现在，我遇到的问题是从第 5 步到第 7 步，因为组件看起来基本上是这样的：

const Foo = () => {
    const insertToDatabaseIfNecessary = useStoreActions((actions) => actions.baz.insertIfNecessary)
    const items = useStoreState((state) => state.baz.items);

    const onSave = async () => {
        await insertToDatabaseIfNecessary();

        // do the actual modifying thing here
        axios.post(...items);
    }

    return (
        <button onClick={onSave}>Save!</button>
    );
}

如果你比我更了解功能组件，那么你知道onSave() 中的insertToDatabaseIfNecessary() 将更新 Redux 存储中的值，但是当我们进行实际修改时，post(...items) 的值是POST 不会更新，因为它们将在下次调用组件时更新。如果这是基于类的组件，它们将被更新，但 easy-peasy 不支持基于类的组件。我想一种方法是直接使用基于类的组件和 Redux，但我觉得可能有一种不同的模式可以用来解决我的问题，而无需求助于基于类的组件。

问题：有没有一种理智的方法可以用功能组件做到这一点？

【问题讨论】：

标签： javascript reactjs redux redux-thunk easy-peasy

【解决方案1】：

easy-peasy 中的 Thunks 可以处理异步事件，所以你应该把你的 axios 帖子放在那里，例如

insertToDatabaseIfNecessary : thunk(async (actions, payload) => {
    // First update the data on the server
    await axios.post(payload.items);

    // Assuming that the post succeeds, now dispatch and action to update your store.
    // (You'd want to check your post succeeded before doing this...)
    actions.updateYourStoreData(payload);
})

这个简单的 thunk 将等待异步 post 完成，因此您可以在 Foo 组件中使用如下操作：

insertToDatabaseIfNecessary();

您无需等待它或在 Foo 组件中使用 onSave 函数。

【讨论】：