Redux의 장점과 3가지 원칙 (Store, Action, Reducer의 역할)

Action객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state생성한다.

??

예?

 

Redux의 장점

1. 상태를 예측 가능하게 만들어준다.
2. 유지보수에 편리하다.
3. 디버깅에 유리하다 (action과 state log기록시)
4. 테스트를 붙이기 쉽다.

컴포넌트가 많지 않아도 redux는 위와 같은 이유로 충분히 쓸 가치가 있는것 같다.

 

 

Redux의 3가지 원칙

1.동일한 데이터는 항상 같은곳에서 데이터를 가져온다. store라는 하나뿐인 데이터 저장소가 있다.

2.액션이라는 객체를 통해 상태를 변경할 수 있다.

3.변경은 순수함수로만 가능하다.

 

 

Store

상태가 관리되는 오직 하나의 공간이다.

 

 

Action

자바스크립트 객체이다. 액션은 스토어에게 우리 애플리케이션 데이터를 운반해주는 역할을 하며 타입을 비롯한 다양한 데이터들이 담긴다. 타입을 꼭 지정해줘야한다.

 

 

Reducer

현재 상태와 action을 이용해 다음 상태를 만들어낸다. reducer에 데이터 수정하는 방법을 정의해놓는다. 한마디로 reducer의 역할은 dispatch에 의해 action값이 들어오면 reducer가 그 action값과 기존에 있었던 state값을 참조해서 새로운 state값을 만들어주는것이 reducer의 역할이다. 그러므로  reducer함수에서 (기존값, 액션값)을 인자로 받는다. 

 

 

 

한마디로..

Action객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state생성한다.

 

 

useSelector

useSelector()는 컴포넌트와 state를 연결하는 역할을 한다. 컴포넌트에서 useSelector 메서드를 통해 store의 state에 접근할 수 있는 것이다.

import { useSelector } from 'react-redux'

 

useDispatch

Dispatch는 Action을 전달하는 메서드이다. dispatch의 전달인자로 Action 객체가 전달된다. 그리고 Reducer를 호출해 state의 값을 바꾸는 역할을 한다.

import { useDispatch } from 'react-redux'