Question

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

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

Answer 1

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

例如：如果您的存储空间中存在类似session.isAuthenticated的值，并且App组件在调用{时Logout组件使用该值来显示logout按钮{1}}操作会修改该值，因此Logout按钮将不再显示。

Answer 2

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

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

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

1.让reducers完成这些工作：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让saga处理存储更新。那个传奇可以发动另一个动作，例如UPDATE_STATE将相同的数据发送到相应的reducer。

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

2 个答案: