React Redux 리액트 리덕스란?

리덕스란 JavaScript 상태관리 라이브러리이다.
리덕스의 본질은 Node.js 모듈이다.

리덕스는 쉽게 설명하면 상태 관리의 로직을 컴포넌트 밖에서 처리 하는 것이다.

리덕스를 사용하면 스토어라는 개체 내부에 상태를 담게 된다.

 

 

 

액션(Action) : 상태 변화를 일으킬 때 참조하는 객체이다.

- const mapActionToProps = (dispatch) => {   } 함수 사용
- Action이라는 단어는 Event와 같다고 생각하면 된다.
- dispatch 인수에서 Ruduce로 넘길 객체(type)를 정의한다.
- Action이 실행되고 끝나면 type을 반환하는데 type은 Reduce로 전달된다.

 

스토어(Store) : 애플리케이션의 상태 값들을 내장하고 있다.

- 리덕스에서는 단 하나의 스토어를 만든다
- 리듀스에 의해서만 state의 값이 변경된다.

- 이 스토어 내부에는 현재의 앱 상태(state)와 리듀서(reducer)가 들어가 있다.

 

리듀서(Reducer) : 상태를 변화시키는 로직이 있는 함수이다.

- ex) export function reducer(state = {state : 10, age:100}, action)
- Reducer 함수는 순수함수여야 한다. 결과 값을 출력 할 때는 파라미터 값에만 의존해야 하며, 언제나 같은 결과를 출력해야 한다.
- Reducer에서 state를 사용한다면 반드시 state를 초기화 해야 한다.
- Reducer에서 state의 변화가 일어난다.
- 값의 갱신은 반드시 reducer에서 해야 한다.

- Action을 Reducer에 전달하기 위해서는 dispatch() 메소드를 사용해야 한다.

 

State : 컴포넌트에 최종 출력하기 전 거치는 중간과정

- 컴포넌트에서 사용하는 데이터

- mpaStateToProps(state) 함수 사용 
- 리덕스에서 저장 하고 있는 상태값(=데이터)
- 딕셔너리 형태로 보관한다 ({[key]: value})
- Store에 저장되어 있는 변수를 가져와서 최종 가공을 위한 목적으로 사용된다.
- 예를 들어, num:state.num*100 이라고 갱신을 하더라도 실제 num의 값은 갱신되지 않고 컴포넌트에 출력하는 값을 가공한 것이다.

디스패치(dispatch) : 액션을 스토어에 전달

- Dispatch는 store의 내장 함수 중 하나로, action을 발생시킨다.

- action을 파라미터로 전달하고 reducer를 호출한다.
- 리액트 컴포넌트에서 리덕스 스토어를 구독하는 작업은 후에 react-redux의 connect 함수가 대신 한다.

 

구독(Subscribe): 

- Subscribe는 store의 내장 함수 중 하나로, 특정 함수를 전달해주면 action이 dispatch 되었을 때마다 전달된 함수가 호출

- 리덕스의 내장 함수를 사용하여 subscribe, unsubscribe 함수를 사용하여 구독 및 구독 취소를 할 수 있다.