React Redux 개념정리

Redux의 기본 개념

1.Single source of truth

동일한 데이터를 항상 같은 곳에서 가지고 온다. 

즉, 스토어라는 하나분인 데이터 공간이 있다.

 

2. State is read-only

리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하지만

리덕스에서는 액션이라는 객체를 통해서 상태를 변경할 수 있다.

 

3.Changes are made with pure functions

변경은 순수함수로만 가능하며 리듀서와 연관되는 개념이다.

Store - Action - Reducer

---

• Store: 컴포넌트와는 별개로 스토어라는 공간에 필요한 상태를 담고 컴포넌트에서 상태 정보가 필요할 때 접근한다.
• Action:앱에서 스토어에 운반할 데이터이며 자바스크립트 객체 형식으로 되어있다.
• Reducer: Action을 Store에 바로 전달하는 것이 아닌 Reducer에 전달하고 리듀서에서 Action에서 전달 받은 내용을 보고 Store에 상태를 업데이트 한다. 이때 dispatch() 메소드를 사용한다.

이때의 순서는 Action 객체가 dispatch() 메소드에 전달하고 dispatch(액션)을 통해 Reducer를 호출 그 후에 Reducer은 새로운 Store를 생성하는 순서이다.

---

useSelector과 usedispatch 란?

우선 useSelector는 Store에 저장된 State 값을 반환한다.

 

const diarys = useSelector((state) => state.diarys.diarys);

 

위의 코드로 예제를 들어보면 useSelector 함수로 state를 받을 수 있는데 console.log(diarys)를 찍어보면 diarys 안에 있는 데이터 값을 확인할 수 있다.

 

그렇다면 useDispatch는 무엇인지 살펴보자.

앞에 말했듯이 Action은 dispatch를 통해 실행할 수 있고 Action에 변경할 새 State를 넣어줘야 Reducer에서 이전 State와 비교하여 변경사항을 적용하여 저장한다.

 

 const dispatch = useDispatch();

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

 

위의 코드로 예제를 보면 모듈 안에 만든 __getDiarys를 dipatch를 통해 넘겨주는 것이다.