我想将我的状态树的某些部分持久化到localStorage。在什么地方这样做比较合适?减速还是行动?


当前回答

为了填补Dan Abramov的答案,你可以像这样使用store.subscribe():

store.subscribe(()=>{
  localStorage.setItem('reduxState', JSON.stringify(store.getState()))
})

在创建存储之前,检查localStorage并像这样解析键下的JSON:

const persistedState = localStorage.getItem('reduxState') 
                       ? JSON.parse(localStorage.getItem('reduxState'))
                       : {}

然后你像这样将这个perstedstate常量传递给你的createStore方法:

const store = createStore(
  reducer, 
  persistedState,
  /* any middleware... */
)

其他回答

如果你不需要复制所有redux store到localStorage,你可以使用特定的store参数:

store.subscribe(()=>{
  window.localStorage.setItem('currency', store.getState().lang)
})

并像这样设置初始状态参数值:

const initialState = {
  currency: window.localStorage.getItem('lang') ?? 'en',
}

在这种情况下,你不需要将const persistedState传递给const store = createStore()

我无法回答@Gardezi,但基于他的代码的选项可能是:

const rootReducer = combineReducers({
    users: authReducer,
});

const localStorageMiddleware = ({ getState }) => {
    return next => action => {
        const result = next(action);
        if ([ ACTIONS.LOGIN ].includes(result.type)) {
            localStorage.setItem(appConstants.APP_STATE, JSON.stringify(getState()))
        }
        return result;
    };
};

const reHydrateStore = () => {
    const data = localStorage.getItem(appConstants.APP_STATE);
    if (data) {
        return JSON.parse(data);
    }
    return undefined;
};

return createStore(
    rootReducer,
    reHydrateStore(),
    applyMiddleware(
        thunk,
        localStorageMiddleware
    )
);

不同之处在于我们只是保存了一些动作,你可以使用debounce函数来保存你状态的最后一次交互

为了填补Dan Abramov的答案,你可以像这样使用store.subscribe():

store.subscribe(()=>{
  localStorage.setItem('reduxState', JSON.stringify(store.getState()))
})

在创建存储之前,检查localStorage并像这样解析键下的JSON:

const persistedState = localStorage.getItem('reduxState') 
                       ? JSON.parse(localStorage.getItem('reduxState'))
                       : {}

然后你像这样将这个perstedstate常量传递给你的createStore方法:

const store = createStore(
  reducer, 
  persistedState,
  /* any middleware... */
)

我有点晚了,但是我根据这里的示例实现了一个持久状态。如果你想每X秒更新一次状态,这个方法可以帮助你:

Define a wrapper function let oldTimeStamp = (Date.now()).valueOf() const millisecondsBetween = 5000 // Each X milliseconds function updateLocalStorage(newState) { if(((Date.now()).valueOf() - oldTimeStamp) > millisecondsBetween) { saveStateToLocalStorage(newState) oldTimeStamp = (Date.now()).valueOf() console.log("Updated!") } } Call a wrapper function in your subscriber store.subscribe((state) => { updateLocalStorage(store.getState()) });

在这个例子中,状态最多每5秒更新一次,而不管更新被触发的频率。

一句话:中间件。

查看redux-persist。或者自己写。

[更新2016年12月18日]编辑删除提及两个类似的项目现在不活跃或弃用。