[React-redux] ToDo List 로컬스토리지로 관리하기

노마드코더 react-redux 강의 챌린지 중 하나인 state를 로컬스토리지로 관리하기

강의: https://nomadcoders.co/redux-for-beginners  

초보자를 위한 리덕스 101 – 노마드 코더 Nomad Coders

 

먼저 기존 코드 중 store.js의 일부이다.

여길 고쳐서 state를 localStorage로 관리하여 새로고침해도 state가 초기화되지 않도록 바꿔보자!

redux-persist를 사용해도 되는데, 기존 프로젝트에서 recoil-persist를 사용한 적이 있고 직접 코드를 짜보는 김에 사용하지 않았다

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [{ text: action.text, id: Date.now() }, ...state];
    case DELETE:
      return state.filter((toDo) => toDo.id !== action.id);
    default:
      return state;
  }
};

const store = createStore(reducer);

export const actionCreators = {
  addToDo,
  deleteTodo,
};

export default store;

 

 

전략과 코드

✔ store.subscribe()를 사용하면 Redux 상태가 변경될 때마다 특정 코드 실행 가능
✔ store.getState()를 이용해 현재 상태를 가져와 localStorage에 저장
✔ JSON.stringify()를 사용해 배열을 문자열로 변환 후 저장

 

1. 초기 상태를 localStorage에서 가져오기

• reducer의 초기 state를 설정할 때 localStorage에서 불러온 값이 있으면 그걸 사용하고, 없으면 기본값([])을 사용하도록 만들기
• localStorage는 문자열만 저장 가능하니까, 데이터를 저장할 때 JSON.stringify()를 사용하고, 불러올 때 JSON.parse()를 사용

const reducer = (
  state = localStorage.getItem("toDo") !== null
    ? JSON.parse(localStorage.getItem("toDo")) // 로컬스토리지에서 가져오면 문자열이기 때문에, 배열로 변환
    : [],
  action
) => {
  switch (action.type) {
    case ADD:
      return [{ text: action.text, id: Date.now() }, ...state];
    case DELETE:
      return state.filter((toDo) => toDo.id !== action.id);
    default:
      return state;
  }
};

 

2. 상태가 변경될 때마다 localStorage에 저장하기

• store.subscribe()를 활용해서 state가 변경될 때마다 localStorage에 현재 state를 저장
• store.subscribe()는 Redux의 상태(state)가 변경될 때마다 특정 코드를 실행하는 함수이다.
• 따라서 이걸 활용해서, todo가 add되거나 delete될 때마다 로컬스토리지에 state를 다시 저장하는 함수를 만들어 subscribe 시켜주면 끝!

const store = createStore(reducer);

const setTodoInLocalStorage = () => {
  // 1. 현재 state가져옴
  const state = store.getState();
  // 2. 로컬스토리지에 현재 state를 저장해줌, state는 배열이니까 문자열로 바꿔서 저장
  localStorage.setItem("toDo", JSON.stringify(state));
};

// subscribe는 state가 변경될 때 실행될 함수를 지정 가능
// 따라서 state(Todo)가 변경될 때 로컬스토리지에 현재 state를 저장해줄 함수를 지정해준다.
store.subscribe(setTodoInLocalStorage);

export const actionCreators = {
  addToDo,
  deleteTodo,
};