比較緩存狀態的Redux模式？

Question

考慮以下Redux的代碼，

let cacheState = {}; 
const mapStateToProps = (state, ownProps) => { 

    const zug = cacheState.bar === state.bar ? "qux" : "doo"; 

    return { 
     foo: state.bar, 
     zug 
    }; 

    cacheState = state; 
}; 

此代碼示例骨刺以下觀察：

1）這似乎是在一個終極版部件

2緩存狀態的唯一方式）本將從這個模板創建多個Redux組件時中斷

3）這是一個反模式

組件注意以前狀態的正確方法是什麼？

Answer 1

您可能想使用中間件來完成此操作。當你的商店被創建時，你會做第一次比較（比如說你使用的是localStorage）並存儲緩存的狀態。然後，您會假設您的商店和緩存都已同步。接下來的每個操作都將通過中間件並將狀態與緩存同步。

你說得對，你在這裏做的是一個反模式，這就是爲什麼中間件方法有用避免它。 Dan Abramov的第二套Redux視頻會覆蓋此確切模式，如果您想通過在Egghead搜索Building React應用程序以及Echomatic Redux或here來檢查em。