从连续反应中读取会话存储的变化

Question

从反应应用程序中识别会话存储值更改的最佳方法是什么？基于哪个状态应该更新？

而不是连续循环和检查有没有更好的方法来实现这一点而不会失去性能。

Answer 1

如果存储中的值发生更改，它会自动传播到使用此值的组件。这是因为组件在传递新值时会重新呈现。

例如：如果你的存储中有一个类似session.isAuthenticated的值，并且当你调用App动作时Logout组件使用该值来显示或不显示logout按钮，这将修改值，这样就不会显示Logout按钮了。

Answer 2

首先，没有针对您的问题的纯Javascript解决方案，因为在here中，它明确指出：

只要对Storage对象进行了更改，就会触发StorageEvent（请注意，对于sessionStorage更改，不会触发此事件）。这不适用于进行更改的同一页面 - 它实际上是域中其他页面使用存储同步任何更改的方式。其他域上的页面无法访问相同的存储对象。

假设你的应用程序纯粹是在React中，并且在React部件之外没有对sessionStorage进行更新，请考虑以下脏选项：

1.让减速器完成工作：reducer接收带有完整数据的动作，在更新状态之前，它首先更新sessionStorage。例：

const someReducer = (state, { type, payload}) => {
    switch (action.type) {
        ... 
        case 'UPDATE_SESSIONSTORAGE_AND_STATE':
            sessionStorage.setItem('itemName', state.payload);
            ... // and do normal state-updating job here
        ...
    }
}

2.使用redux-saga：将数据传递给一个动作，例如UPDATE_SESSIONSTORAGE并让一个传奇处理存储更新。那个传奇可以发动另一个动作，例如UPDATE_STATE将相同的数据发送到相应的reducer。