Question

我正在使用Redux，并想在local storage上存储一些州。

我只想存储从服务器收到的令牌。商店里还有其他东西我不想存放。

我在Google上找到的工作流程是从local storage中的initial store map抓取。

然后他使用store.subscribe定期更新本地存储。

如果我们存储整个商店，这是有效的。但就我而言，只有在用户注销或新用户登录时才会更新令牌。

我认为store.subscribe是一种矫枉过正的行为。

我还读到local storage中的reducers更新不是redux方式。

目前，我在更新local storage之前更新action中的reducer。

这是正确的流程还是有更好的方法？

Answer 1

您发现的示例可能是将每个状态更改将整个状态树序列化为localstorage，允许用户关闭选项卡而不必担心不断保存，因为它始终在LocalStorage中保持最新状态。

但是，很明显，这并不是您要查找的内容，因为您希望在LocalStorage中缓存特定的优先级数据，而不是整个状态树。

作为反模式的缩减器的一部分，更新LocalStorage也是正确的，因为所有副作用都应该本地化为动作创建者。

因此，您应该在您的动作创建者中阅读和写入LocalStorage。

例如，用于检索令牌的操作创建者可能类似于：

const TOKEN_STORAGE_KEY = 'TOKEN';    

export function fetchToken() {
    // Assuming you are using redux-thunk for async actions
    return dispatch => {
        const token = localStorage.getItem(TOKEN_STORAGE_KEY);

        if (token && isValidToken(token)) {
            return dispatch(tokenRetrieved(token));
        }

        return doSignIn().then(token => {
            localStorage.setItem(TOKEN_STORAGE_KEY, token);        
            dispatch(tokenRetrieved(token));
        }
    }
}

export function tokenRetrieved(token) {
    return {
        type: 'token.retrieved',
        payload: token
    };
}

然后在应用程序启动的早期某处（例如在您的根组件的componentWillMount生命周期方法中），您将调度fetchToken操作。

fetchToken负责检查LocalStorage是否有缓存令牌，以及在检索到令牌时将新令牌存储在那里。

Redux本地存储工作流程

1 个答案: