Question

因此，我一直在按照教程进行操作，以使Redux状态持久保存到本地存储中。 https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage

但是，如果我用reducers这样创建我的商店怎么办？

 const store = createStore(rootReducer, initialState)

根减速器是以下各项的组合减速器：

 const rootReducer = combineReducers({
    auth: AuthStore,
    content: contentReducer,
    pages: pageReducer,
 }

每个reducer都有自己的state / initialState，例如contentReducer的构造如下：

const initialState = {selected, search}
const contentReducer = (state = initialState, action) => {
   switch (action) {
     case SELECT :   
       return {
         ...state,
         selected: action.payload
     case SEARCH: 
       return {
         ...state,
         search: action.payload
       }
   }
 }

如果我按照本教程操作，那么我可以做

 const saveSelected = (state) => {
    try {
        const serializedSelected = JSON.stringify(state);
        localStorage.setItem('selected', serializedSelected)
    } catch (err){
        console.log(err)
    }
 }
 store.subscribe(() => {
    saveSelected(store.getState().content.selected)
 })

但是，由于我有更多的化简器（我仅在上面给出了一些示例），因此有许多动作被分派到存储中，所以我不希望存储在每次分派任何动作时都保持触发订阅功能。我只希望商店在特定的store.getState().content.selected更新时订阅更改。我该怎么办？

Answer 1

您可以使用Redux中间件，该中间件使您可以注册在每个dispatch上都被调用的函数。您将获得对存储对象的引用，以便可以检查store.getState().content.selected状态并采取相应的措施。查看更多详细信息和示例here。

持久化redux嵌套状态更改为本地存储

1 个答案: