리덕스 상태 로컬 스토리지에 저장

찾아보니 대부분 redux-persist로 하던데 원리를 이해해 보고 싶어서 그냥 생각해서 구현했다.

먼저 App 컴포넌트에서 store.subscribe로 상태 변화를 관찰하면서 전역 상태의 특정 변수가 업데이트 되면 값을 비교해서 로컬 스토리지에 저장하도록 했다.

function savaData() {
  const objectives = store.getState().objectives?.objectives;
  AsyncStorage.setItem('objectives', JSON.stringify(objectives));
  console.log('local saved');
}
let currentValue;
function handleChange() {
  let previousValue = currentValue;
  console.log('이전 밸류', previousValue);
  currentValue = select(store.getState());
  console.log('변경 밸류', currentValue);
  if (previousValue !== currentValue) {
    savaData();
  }
}
store.subscribe(handleChange);

그리고 홈 컴포넌트에서 useEffect를 사용하여 로컬스토리지 값을 불러와서 값이 있으면 전역 상태를 업데이트 해줬다.

  const getData = async () => {
    const storageData = await AsyncStorage.getItem('objectives');
    const parsed = JSON.parse(storageData);
    if (!parsed || !Object.keys(parsed).length) {
      // storage data가 빈 객체일 때는 업데이트 하지 않는다.
      return;
    }
    onSetState(parsed); // redux initial state 업데이트 dispatch.
    return;
  };

localStorage를 사용하는 것도 좋지만 local db를 사용하는 것을 권장한다. (sqlite, realm) 사용하다 보면 속도 면이나 관리 면에서 한계가 좀 있다. 하지만 가벼운 앱이라면 localStorage를 사용해도 괜찮을 듯.