基於 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 中，您可以通過監聽相關的應用程序更改來做到這一點。 我不知道這在這里是否相關。