Redux :: local state 를 store의 state 로 바꾸기

제로초 노드버드 강의 정리 노트

 

redux를 사용하여 

store로 state를 만들어보자!

 

 

 

기본설정하기(reducer, action 설정)

store는 이전 글(next-react-wrapper관련 글)에서 설정완료

 

/reducer/index.js

 

state 초기값 설정 및 action creator 설정

reducer 설정

Reducer에서 return 값은 history 관리를 위해 불변성(immulity)을 유지하는 것이 중요하다.

객체는 동일한 내용으로 새로운 객체를 만들더라도 같은 객체로 취급하지 않기 때문에,

새로운 객체를 만들어 항상 다른 객체를 리턴해주어야 한다.

 

reducer에서 spread 문법을 사용하는 이유는 직접 할당할 때 보다 메모리 낭비를 막을 수 있기 때문이다.

Object spread의 경우 참조관계를 유지하기 때문에,

data가 바뀌지 않는 경우, 메모리를 재 할당하지 않고 참조한다.

 

---

state 가져오기

컴포넌트에서 state를 설정할 때는 useState를 사용했다면,

store에서 state를 가져올 때는 useSelector(react-redux 메서드)를 사용한다.

  useSelector((state) => state에서 가져오고싶은 부분);  

 

 

setState 설정하기

store를 사용하기 전에는 setState를 사용하여 props로 자식컴포넌트에 넘겨줬었다.

store을 사용하면 props를 사용할 필요가 없다.

대신 useDispatch를 사용하여 action을 불러와 state를 변경해준다.

 

  const dispatch = useDispatch();  

  dispatch((액션());