Как поместить и получить состояния в localStorage в Redux - PullRequest
Новая
       39

Как поместить и получить состояния в localStorage в Redux

0 голосов
/ 08 апреля 2020

Я пытаюсь реализовать список с React-Redux и возникла проблема. Я не знаю, как я могу поместить массив с предложениями в localStorage, а затем получить его. У меня есть вход, где я пишу сделку, а затем после нажатия кнопки «Добавить» значение помещает в массив сделок, а затем я сопоставить этот массив. Но я не знаю, как я могу поместить этот массив в localStorage в Redux. Я пробовал разные варианты, но они были неудачными. Теперь я поместил все состояния в 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()))
      })

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

Вы можете использовать избыточную постоянную библиотеку, которая хранит клон избыточного хранилища в локальном хранилище. Вот команда для установки npm install redux-persist Если вы хотите узнать больше об этом, пожалуйста, go через этот URL: https://www.npmjs.com/package/redux-persist

0 голосов
/ 08 апреля 2020

Просто инициализируйте состояние с данными из 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 пакет

...