react - redux- intro

redux- intro

redux : 상태 관리를 하기 위한 라이브러리

앱의 상태 전부는 하나의 저장소(store) 안에 있는 객체 트리에 저장된다.
상태 트리를 변경하는 유일한 방법은 어떤 행동이 일어날지에 해당하는 action이다.
action에 따라 상태를 어떻게 변경할지 명시하기 위한 함수를 작성하고 이를 reducer 함수라고한다.

리덕스의 3가지 원칙

1. Single source of truth : 스토어라는 하나뿐인 데이터 공간을 활용하기 때문에 신뢰할 수 있는 데이터이다.
2. State is read-only : 액션을 전달하는 리듀서 함수를 이용해서만 상태를 변경하며 직접 state를 변경하지 못한다.
3. Change are made with pure function : 변경은 오로지 순수함수로만 가능하다.(리듀서를 이용한다.)

리덕스 사용하기위한 스크립트와 선언

<script src="https://www.unpkg.com/redux@4.2.1/dist/redux.js"></script>

const { createStore } = Redux;

Reducer 함수 작성
(state, action) => state 형태의 순수함수 형태로 리듀서 함수를 작성한다.
swtich문 말고도 어떤 형태로든 팀 내의 컨벤션에 맞게 작성할 수 있다.

주의 사항
state 객체는 변경해서 안되고 상태가 바뀌면 반드시 새로운 객체를 생성해서 반환한다.
일반적으로는 spread 연산자를 이용할 수 있다. 주소값 일치 여부로 변경 여부를 확인하기 때문이다.

(state 현재의 상태값, action 어떤동작을할지) => 변화시키고싶은 state를 반환

action : 스토어에 운반할 데이터를 말하며 주문서와 비슷한 개념

{
  type : 'ACTION_NAME',                   // 필수
  payload : { name : '홍길동', age : 20 } // 옵션 
}

function counter(state = 0, action) {

            switch(action.type) {
                case 'INCREMENT' : 
                    return state + 1;
                case 'DECREMENT' :
                    return state - 1;
                default : 
                    return state;
            }
        }

리덕스 저장소(store) 생성 : 앱의 상태를 보관
통상 store라고하며 store가 제공하는 api는

• subscribe
• dispatch
• getState 가 있다.

const store = createStore(counter);

스토어의 상태 변화를 구독할 함수를 콜백 형태로 전달한다. 리액트와 연동하는 react redux에서는 직접 subscribe를 호출하지는 않는다.

store.subscribe(() => console.log(store.getState()));

`dispatch`는 리듀서 함수를 호출. 리듀서 함수의 첫번째 매개변수인 state는 현재 상태를 리듀서가 넣어서 호출하게된다. dispatch를 이용해 action을 넣어 호출하게되면 리듀서 함수의 두 번째 인자로 값을 전달하게 된다. state를 변경하는 유일한 방법은 액션을 보내는 것 뿐이다.

store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });