React - Redux

Redux

리덕스를 쓰는 이유 :

리액트에는 여러 곰포넌트에서 공통적으로 쓰이는 데이터들이 있는데 (ex 회원 정보 ) ,
리덕스는 이를 중앙에서 하나로 관리해서 컴포넌트에서 뿌려주는 역할을 한다.
만약 리액트의 부모 컴포넌트에서 데이터들을 뿌려주는 역할을 하면,
데이터가 큰 경우 비효율적이기 때문에 리덕스 같은 중앙 데이터 저장소가 필요하다.

중앙 데이터 저장소의 종류 :

1. Redux
   장점 : 원리가 가장 간단하기 때문에 에러가 나도 잘 해결된다. 즉 안정적이다.
   단점 : 코드량이 많아 생산성이 떨어진다.
2. Mobx
   장점 : 코드량이 적어 생산성이 좋다.
   단점 : 에러가 났을 때 추적이 어렵다.
3. Context API
   장점 : 데이터량이 적을 때 좋다.
   비동기 : Redux 나 MobX 처럼 비동기를 지원해주지 않는다.

---

리덕스의 개념

액션

상태에 어떤 변화가 필요하면 액션이 발생한다.
이는 객체로 표현된다.

{type:'ADD_COLOR'}

또는

{
	type:'AAD_COLOR',
    data:{
    	id:1,
        text:"red"
    }
}

type 필드는 필수로 가지고 있어야하며,
나머지는 상태를 업데이트 할 때 참고할 값이다.

액션 생성 함수

액션 생성 함수 (action creator)은 액션 객체를 만들어 주는 함수이다.

function addColor(data){
	return {
    	type:'ADD_COLOR',
        data
 	};

리듀서

reducer는 변화는 일으키는 함수이다.
액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다.
그리고 두 값을 참고하여 새로운 상태를 만들어서 반환해준다.

// 초기상태 정의 함수
const initialState = {
	counter : 1
}

// 리듀서
function reducer(state = initialState, action){
	switch (action.type){
    	case INCREASE:	
        	return {
            	counter : state.counter + 1
            };
        default:
        	return state;
    }
}

스토어

하나의 애플리케이션 안에는 하나의 스토어가 들어간다.
스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며,
중요한 내장 함수를 지닌다.

디스페치

dispatch 함수는 액션을 발새시키는 함수이다.
dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다.
이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜 새로운 상태를 만든다.