如何在 Redux 中将状态放入和获取到 localStorage答案

【问题标题】：How put and get states into localStorage in Redux如何在 Redux 中将状态放入和获取到 localStorage
【发布时间】：2020-07-20 23:37:50
【问题描述】：

我尝试使用 React-Redux 实现 do list，但遇到了问题。我不知道如何将带有交易的数组放入 localStorage 然后获取它。我输入了我写交易的位置，然后单击按钮“添加”值放入数组交易中，然后映射该数组。但我不知道如何将该数组放入 Redux 的 localStorage 中。我尝试了不同的变体，但都失败了。现在我将所有状态都放入 localStorage，但我不知道接下来要做什么。

也许如果我能以某种方式获得状态，而不是我能意识到要做的事情。

减速器

const initialState ={
    value: "",
    deals: []
}

export default function toDoList(state = initialState, action){
    switch(action.type){
        case HANDLE_CHANGE:
            return { 
                ...state, value: action.value.target.value
            }
        case ADD_DEAL:
            return { 
                ...state, deals: [...state.deals, action.deal], value: ""
            }
        default:
            return state
    }
}

动作

export function handleChange(value){
    return{
        type: HANDLE_CHANGE,
        value
    }
}

export function addDeal(deal){
    return{
        type: ADD_DEAL,
        deal
    }
} 

export function typeDeal(deal){
    return (dispatch) =>{
        if(deal == "" || deal == " "){
            alert("Please type deal");
        }else{
            dispatch(addDeal(deal));
        }
        dispatch(getDealsLocalStorage())
    }
} 

export function getDealsLocalStorage(){
    return (dispatch) =>{
        const getlocalStorage = JSON.parse(localStorage.getItem('testLocal'));
        const dealsLocal = getlocalStorage.ListInput.deals; //get array with deals from localStorage
   }
}

index.js

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;

const store = createStore(
    Reducer,
    composeEnhancers(
        applyMiddleware(thunk)
        )
    )

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

【问题讨论】：

标签： reactjs redux react-redux local-storage

【解决方案1】：

只需使用来自 localStorage 的数据初始化状态

let initialState = {
    value: "",
    deals: []
}

try {
  let state = localStorage.getItem('testLocal');
  if (state) {
    initialState = JSON.parse(state || JOSN.stringify(initialState))
  }
catch (e) {
   
}

export default function toDoList(state = initialState, action){
    switch(action.type){
        case HANDLE_CHANGE:
            return { 
                ...state, value: action.value.target.value
            }
        case ADD_DEAL:
            return { 
                ...state, deals: [...state.deals, action.deal], value: ""
            }
        default:
            return state
    }
}

不过，我想说，使用redux-persist 包

【讨论】：

【解决方案2】：

您可以使用 redux presistent 库，它将 redux 存储的克隆保存在本地存储中。这是安装npm install redux-persist的命令如果您想了解更多信息，请访问此网址：https://www.npmjs.com/package/redux-persist

【讨论】：

谢谢，我会努力的）