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

Question

首先對我需要實現的目標進行一些描述。 我在前端 (React) 中顯示主要對應於數據庫行的信息，用戶可以對這些對象進行常規 CRUD 操作。 但是，我還在發送到前端的 JSON 中添加了一些虛擬行，因為有些對象是“默認值”並且不應插入到數據庫中，除非用戶確實想要修改它們。 所以我需要做的是，一旦用戶想要修改前端的“默認”對象，我首先必須將該對象發布到特定端點，該端點將其從常量復制到數據庫，然后再跟進請求修改該行。

其次，圍繞這個的架構。 為了在前端存儲行的狀態，我通過easy-peasy使用Redux，並且我有一個在修改之前進行第一次保存的thunk 。 一旦用戶想要在 UI 的任何位置編輯“默認”對象（大約有 20 種不同的編輯對象的方法），程序流程如下所示：

1. 用戶編輯內容並按“保存”
2. 在 save 函數中調用 Thunk 並await ed
3. Thunk POST 到后端以將對象插入數據庫並返回相應的行
4. 后端以行的 ID-s 響應
5. Thunk 調用action並使用正確的 ID-s 更新存儲中的這些對象
6. Thunk 返回，函數指針移回修改函數
7. 修改函數使用正確的 ID-s 發出另一個請求
8. 修改函數使用修改后的值更新商店

現在，我遇到的問題是從第 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) POSTed 不會更新，因為它們將在下次調用組件時更新。 如果這是一個基於類的組件，它們會被更新，但是 easy-peasy 不支持基於類的組件。 我想一種方法是直接使用基於類的組件和 Redux，但我覺得可能有一種不同的模式可以用來解決我的問題，而無需求助於基於類的組件。

問題：是否有一種理智的方法來使用功能組件來做到這一點？

Answer 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 將等待異步發布完成，因此您可以在 Foo 組件中使用如下操作：

insertToDatabaseIfNecessary();

您不需要等待它或在您的 Foo 組件中使用 onSave 函數。