如何在Redux中将状态放入并获取到localStorage中

Question

我试图用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()))
})

Answer 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包

Answer 2

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