使用Redux重新應用操作/操作歷史記錄

我正在使用Redux（使用React）來處理我的應用程序中的狀態。我有以下情形：使用Redux重新應用操作/操作歷史記錄

加載一個項目
應用變換（S）到列表的列表（任意變換數）
在清單縮小顯示的項目
增加列表中顯示的項

在步驟4：如何最好地實現再次增加顯示的項目，步驟1的轉換仍然應用/重新應用？

一個例子：

50項載入列表
大寫項
過濾項顯示具有小於4個字符的項目（=>結果在 30項）
應用過濾器再次顯示少於10個字符的項目（=>應該導致50個項目全部仍然大寫）

2016-04-18 Jouni Kantola

最好我可以自己想出來擴展每個列表項目，因此（例如上限和最多5個字符）： ''[{value：'text'，displayValue：'TEXT'，filtered ：false}，{value：'another text'，displayValue：'ANOTHER TEXT'，filtered：true}]''' 這是一個簡單的解決方案， –

根據您的描述，應該保存在商店中的唯一實際狀態是初始數據和有關當前過濾器的信息。例如，你的狀態形狀看起來像：

{ 
    items: ['April', 'Jake', 'Mary', 'Zooey', 'Dan'], 
    filters: { 
    isUppercase: false, 
    maxLength: 10 
    } 
}

當你改變的數據，該items減速會處理添加和刪除的項目。在更換過濾器時，filter減速器將記錄新的過濾器設置。

現在是重要的部分。 實際過濾發生在爲組件選擇數據時。

我們建議在Redux中存儲最小可能狀態。在這種情況下，列表本身和關於過濾器的信息是最小可能的狀態。 應用過濾器的當前列表始終可以從狀態計算得出，因此它不應處於狀態。

相反，您可以根據當前的狀態寫入選擇數據一個純函數：現在

function filterItems(items, filters) { 
    return items.filter(item => { 
    // return true or false depending on your logic 
    }) 
}

，如果您使用的反應，你可以把它在你的render()方法：

var filteredItems = filterItems(this.props.items, this.props.filters)

您可能會發現，在每個渲染上重新計算此值可能效率不高。謝天謝地，解決方案很簡單：memoization。確保只有在輸入發生變化時纔會重新計算派生數據。 Reselect是一個小型庫，可以讓你做到這一點，它經常與Redux一起使用。

您可以在Redux網站官方Computing Derived Data配方和Reselect README的一些示例中找到關於此主題的更多信息。

來源

2016-04-18 23:52:20

使用Redux重新應用操作/操作歷史記錄

回答

相關問題