用于比较缓存状态的 Redux 模式？

【问题标题】：Redux Pattern for Comparing a Cached State?用于比较缓存状态的 Redux 模式？
【发布时间】：2017-02-19 00:37:57
【问题描述】：

考虑以下 Redux 代码，

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

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

    return {
        foo: state.bar,
        zug
    };

    cacheState = state;
};

此代码示例激发了以下观察：

1) 这似乎是在 Redux 组件中缓存状态的唯一方法

2) 如果从此模板创建了多个 Redux 组件，这将中断

3) 这是一种反模式

组件了解先前状态的正确方法是什么？

【问题讨论】：

标签： reactjs redux flux

【解决方案1】：

您可能希望使用中间件来完成此操作。创建商店后，您将进行第一次比较（例如，如果您使用的是localStorage）并存储缓存状态。然后，您会假设您的存储和缓存都已同步。接下来的每一个动作都会通过中间件并将状态与缓存同步。

您是对的，您在这里所做的是一种反模式，这就是为什么中间件方法有助于避免它的原因。如果您想通过在 Egghead 或 here 中搜索 使用 Idiomatic Redux 构建 React 应用程序 来查看它们，Dan Abramov 的第二组 Redux 视频会详细介绍这种模式。

【讨论】：