Redux

호두·2022년 7월 26일

React redux

React

목록 보기

12/13

Redux

리덕스는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다.
Redux 공식문서

리덕스는 데이터를 스토어(store) 에서 관리한다.

스토어의 데이터가 변경되는 과정이다.

컴포넌트는 dispatch( ) 함수를 통해 리듀서에 액션을 전달한다.
액션에는 리듀서에서 처리해야 할 작업의 이름과 데이터가 객체 형태로 들어있다.
리듀서는 액션을 받아 스토어 변경 작업을 진행한다.
스토어 변경 작업이 완료되면 connect( ) 함수로 연결된 컴포넌트에 변경된 스토어의 데이터를 전파하여 동기화 한다.

음식점으로 비유를 해보자면

component : 손님
dispatch ( ), connect ( ) : 종업원
action : 주문서
reducer : 요리사

손님(컴포넌트)이 종업원(dispatch ()) 에게 음식을 주문하면 종업원은 주문서(액션)을 요리사(리듀서)에게 전달한다.
요리사가 음식을 완성하면 (connect())가 손님에게 음식을 전달한다.

Redux 기본용어

액션 (Action)
- 상태에 변화가 필요하다면 액션을 일으켜야한다. 액션은 객체로 표현되며 type 필드를 반드시 가지고 있어야 한다.
액션 생성함수 (Action Creator)
- 액션 객체를 만들어주는 함수이다. 화살표 함수로도 표현이 가능
리듀서 (Reducer)
- 현재 상태와 액션 객체를 받아, 필요하다면 새로운 상태를 리턴하는 함수이다.
  액션 유형을 기반으로 이벤트를 처리하는 이벤트 리스너라고 생각하자
  - initialState (초기값) 의 카운터 1 이고 액션이 Increment이면 counter + 1을 리턴하고 아니면 상태값을 리턴한다.
스토어 (Store)
- 스토어에는 상태가 들어있다. 하나의 프로젝트는 하나의 스토어만 가질 수 있다.
디스패치 (dispatch)
- 스토어의 내장 함수 중 하나이다 하위 컴포넌트에서 액션 객체를 넘겨줘서 상태를 업데이트 하는 유일한 방법이다.
구독 (Subscribe)
- 스토어의 내장 함수이며 리스너 함수를 파라미터로 넣어 호출하면 상태가 업데이트 될때마다 호출된다.
셀렉터 (Selector)
- 상태 값을 가져올 때 사용한다.

리덕스 환경 만들기

리덕스 설치하기

npm i redux react-redux
npm i--save-dev redux-devtools-extension

리덕스 크롬 확장 도구 설치하기

Redux로 빈 스토어 생성하기

리덕스를 사용하려면 스토어를 생성해야한다.

createStore() 함수 사용법
- ```
createStore( reducer, /* initial state */ , /* enhancer */ )
```
- createStore() 함수는 리듀서, 스토어 데이터의 초깃값(state), 미들웨어 함수(리듀서 함수가 실행될 때 함께 실행되는 함수들)를 인자로 받는다.
  state 와 미들웨어는 생략해도 스토어가 생성된다.
스토어 생성하기
- createStore() 함수의 리듀서로 state => state를 전달하여 스토어를 생성한 것이다.
- createStore에 밑줄이 뜨면 import {legacy_createStore as createStore} from 'redux’ 로 바꾸자

리덕스의 createStore() 함수를 임포트했다.
react-redux의 Provider 컴포넌트를 사용하여 스토어 데이터를 하위 컴포넌트에 전달한다.
리듀서를 createStore() 함수의 인자로 전달한다.

Provider 란??

react-redux에서 제공하는 스토어 데이터 공급자이다. Provider 아래에 배치한 컴포넌트들이 스토어에 연결될 것 이다.

리덕스 개발자 도구 연동하기
- ```
const store = createStore(state => state,  
window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__())```
```
- 스토어를 생성할 때 데이터 초깃값을 설정하지 않아 (pin) : undefined라는 값을 확인 할 수 있다.

Redux로 채워진 스토어 생성하기

스토어에 스토어 데이터 설정해 보기

[State > Tree] 확인해 보면 데이터 초기값이 잘 들어왔다.

액션과 리듀서의 관계

액션
- 액션은 {type : … , payload : … } 구조로 된 객체이다. type은 액션이 어떤 작업인지 이해할 수 있는 고유한 값(중복 X)을 구분한 문자열로 넣어준다.
- payload는 스토어에 사용될 값이다.
- 키 이름으로 type은 바꾸면 안되고 payload는 다른 이름으로 지어도 된다. 그리고 payload는 생략 가능하다.
```
//액션 예시
{
	type : ’SET_LOADING’ ,
	payload : true , 
} 
{
	type : ‘SET_USER’ ,
	payload : {name : ‘Park’, age : 20 }
} 
```
리듀서
- 리듀서는 다음과 같은 함수 구조를 가진다.
```
function reducer ( state, action ) 
{ 
return state; 
}
```
- 리듀서는 스토어의 이전 데이터(state) 액션을 받아 새로운 스토어의 데이터를 반환한다.
```
const reducer = (state, action ) => state + action.payload 
// (이전 데이터(state) 를 새로운 데이터(state + action.payload) 로 변경)
```
- 리듀서가 반환하는 값의 자료형은 스토어의 이전 데이터와 동일해야한다!!!!!
dispatch()
- 액션은 dispatch() 함수를 통해 리듀서로 전달된다.
- useEffect() 안에서 { type : 'SET_LOADING', payload : true, } 라는 액션이 dispatch() 함수를 통해서 리듀서(state => state)에 전달되고 있다.

위 코드를 실행하고 확장 도구를 보면 SET_LOADING 이라는 액션 타입이 나타난다.

[Action]을 누르면 상세 내용을 확인 할 수 있다.
[State]는 리듀서에 전달된 액션에 의해 바뀐 스토어 데이터(state)도 확인 할 수있다.
[Diff]는 이전 state와 현재 state를 비교하여 알려준다. 우리는 state를 변화 시키지 않았으므로 ‘states are equal’ 이라는 문구가 출력된다.