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

Posted 2023-03-16

【中文标题】将 redux 嵌套状态更改持久化到本地存储

【英文标题】：Persist redux nested state changes to local storage

【发布时间】：2019-09-20 12:32:51

【问题描述】：

所以我一直在按照教程使 redux 状态持久保存到本地存储。 https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage

但是，如果我使用减速器创建这样的商店会怎样：

 const store = createStore(rootReducer, initialState)

而根reducer是一个组合reducer：

 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)
 )

但是，由于我有更多的 reducer（我只是在上面给出了一些示例），因此有很多动作被分派到商店，我不希望商店在每次分派任何动作时都继续触发订阅功能。我只希望商店在特定 store.getState().content.selected 更新时订阅更改。我该怎么做？

【参考方案1】：

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