[Redux] 리덕스 개념

컴포넌트의 데이터 관리를 위한 리덕스

 

패키지 설치

yarn add redux react-redux

공식문서

 

전역 상태관리

= 부모와 자식과 동떨어진 곳인 한군데에 데이터를 넣어두겠다.

= 전역으로 저장해둔 데이터 모음들을 아무데서나 참조하겠다.

 

- State

전역으로 저장하고있는 데이터

딕셔너리 형태({[key]: value})로 보관

 

- Action

데이터에 변경이 필요할때 발생시키는 것(예: 좋아요 눌렸을때 파란불 들어오게)

객체, {type: 'CHANGE_STATE', data: {...}}

 

- ActionCreator (=액션 생성 함수)

const changeState = (new_data) > {

      return {

            type: 'CHANGE_STATE',

            data: new_data

        }

}

액션을 리턴해줌

 

- Reducer

리덕스에 저장된 상태(=데이터)를 변경하는 함수

액션 생성 함수를 부른다 -> 액션을 만든다 -> 리듀서가 현재 상태(=데이터)와 액션 객체를 받는다 -> 새로운 데이터를 만든다 -> 리턴해준다.

// 기본 상태값을 임의로 정해줬어요.
const initialState = {
	name: 'mean0'
}

function reducer(state = initialState, action) {
	switch(action.type){

		// action의 타입마다 케이스문을 걸어주면, 
		// 액션에 따라서 새로운 값을 돌려줍니다!
		case CHANGE_STATE: 
			return {name: 'mean1'};

		default: 
			return false;
	}	
}

 

- Store

데이터를 볼 수있게 해줌

딕셔너리(제이슨)처럼 생김

 

- Dispatch

컴포넌트들이 리덕스에 들어있는 데이터를 바꾸고싶으면 dispatch를 통해 액션 생성 함수를 호출한다. 

액션을 발생시키는 역할

 

리덕스의 세가지 특징

- 스토어는 하나만 쓴다.(=단일스토어규칙) = 한 프로젝트는 스토어 하나만 가진다.

- 스토어의 데이터(state)는 action으로만 변경 할 수있다.

- 어떤 요청이와도 리듀서는 같은 동작을 해야한다. = 리듀서는 순수한 함수여야 한다.

순수한 함수: 파라미터 외의 값에 의존X, 이전 상태 수정X(변화를 준 새로운 객체 return), 파라미터가 같으면 항상 같은 값 반환, 리듀서는 이전 상태와 액션을 파라미터로 받는다.

 

상태관리 순서

1. 스토어에있는 데이터를 컴포넌트에 보냄 (= 구독)

2. 컴포넌트 하나에서 추가하기, 좋아요와 같은 변함에 대한 액션 호출

3. 리듀서는 스토어에 있는 값 변화시킴(새 상태값 변함)

4. 컴포넌트는 새로운 상태값을 받아옴(props가 바뀌면 리렌더링 됨)