[개발일지] redux 1차배포 한 후 새로고침을 하면 상태값 리셋되는 현상

 

# 문제점

금액 수정하는 페이지에서 새로고침을 누르면 하얀페이지가 나타난다.

 

 

# 원인

상태값이 초기화 되면서 값이 없어서 하얀페이지로 나온다.

뒤로가기는 리덕스를 통해서 성공 했는데 새로고침은 여전히 문제였다.

 

 

# 해결 방안

redux-persist 라이브러리를 사용하면 된다.

상태값이 필요없는 페이지에서 상태값이 그래도 존재한다.

그래서 상태값이 필요없는 페이지에서는 리덕스를 초기화시켜준다.

 

 

 

# redux-persist 라이브러리 사용방법

이전 글을 참조하자!

 

2024.01.16 - [Study/자바스크립트] - [redux] 새로고침해도 state(상태값)를 유지하기

[redux] 새로고침해도 state(상태값)를 유지하기

 

 

# 상태값을 초기화 해주는 방법

 

 

1 ) reducer 함수에  리셋인 경우를 추가 시켜준다.

  case "RESET":
      return initialState;

 

2) actions.js 에 함수를 만들었다.

export const resetState = () => {
  return {
    type: "RESET",
  };
};

 

3)리셋이 되어햐하는 페이지에 useEffect 안에 리셋되는 코드를 넣는다.

 useEffect(() => {
    dispatch(resetState());
  }, []);

 

 

그럼 리셋이 된다.

 

# 마무리

오래 전부터 뒤로가기는 이슈가 되었다 그래서 "목록으로" 버튼을 만들어서 뒤로가기를 해결했었다.

이 방법을 사용하니까 브러우저 자체에서 뒤로가기를 누르면 전 페이지를 쉽게 간다.

사용자의 요구를 만족 시킬 수 있었다.

 

기능을 알게 되어 공부하고 해결하는 과정이 뿌뜻했다. 문제를 해결했다는 만족감이 컸다.

알면 알수록 기능은 정말 다양했다. 내가 어렴풋이라도 기능을 알고 있으면 문제가 생겼을 때 적합한 걸 찾아볼 수 있을거 같다.