Redux 데이터 초기화 이유 +해결하기

---

Redux store의 데이터가 초기화 되는 이유

<form>내부의 <button>은 클릭 시, submit 이벤트가 발생 됩니다.
데이터를 submit하기 위해 페이지를 reload하고
페이지가 reload되면 리덕스 store의 state가 초기화 됩니다.

3가지 해결방안

1. 새로고침 이벤트 막기

• <button>

  • e.preventDefault()로 기본 이벤트를 막는다.

    <button name="hi" onClick={preventSubmit}>
    ...
    function preventSubmit(e){
        e.preventDefault();
        console.log(e);
    }

---

2. React-router-dom 사용하기

• react-router-dom의 Link, navigate (v5는 history) 사용하기

<Link to="/">
...
history.push("/")

• Link, navigate은 주소만 바꾸고 페이지를 새로고침 하지 않는다.
  • 클릭을 이용해 이동할 때는 Link 컴포넌트 사용
  • 함수 기능 내에서 페이지를 이동할 때에는 useNavigate, navigate 사용

---

3. Redux-persist 패키지

• 꼭 새로고침을 해야 하는 경우, redux-persist 사용

  • localStorge: 새로고침을 해도 데이터가 초기화되지 않음
  • SessionStroge: 새로고침 시 데이터 초기화

import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";

...

const persistor = persistStore(store);

const Root = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

ReactDOM.render(<Root />, document.getElementById("root"));