리액트 리덕스

• 리덕스 ( Redux ) 란?
  리덕스는 가장 사용률이 높은 상태관리 라이브러리로써

  위에 언급한대로 리액트의 복잡한 컴포넌트 구조속에서 보다 간편하게
  모든 컴포넌트들이 state 를 쉽게 공유할 수 있게 해주는 방식이다.

​

우선 리덕스는 리액트 내부에 있는 기술이 아니며 순수 HTML, JAVASCRIPT 내에서도 사용이 가능하다.

리듀서 ( Reducer )

State 에 변화를 일으키는 함수이다. 쉽게 말해 위에 만들어진 Action 등의 일거리를 직접 수행하는 놈이다.

​

리듀서는 현재의 State 와 Action 을 인자로 받아 Store ( 스토어 ) 에 접근해 Action 에 맞춰 State 를 변경한다.

function reducer(state, action) {
    switch(action.type) {
        case 'NUMBER_COUNT':
            return state + 1;
        case 'CHANGE_INPUT':
            return state;
        default:
            return state;
    }
}

스토어 ( Store )

스토어는 현재 앱의 State 와 Reducer 함수, 그리고 몇 가지 내장 함수등을 가지고 있다.

​

스토어는 State 를 수시로 확인해 View 한테 변경된 사항을 알려주는 녀석이라 생각하면 된다.

디스패치 ( dispatch )

디스패치는 스토어의 내장 함수 중 하나로 리듀서에게 Action 을 발생하라고 시키는 것이라고 이해하면 된다.

​

dispatch 함수는 dispatch(action) 이런 식으로 Action 을 인자로 넘긴다.

​

이렇게 호출을 하면 스토어가 리듀서 함수를 실행해 리듀서 함수가 넘긴 액션을 처리해 새로운 상태를 만들어 준다.

1. 하나의 어플리케이션은 하나의 스토어만 가진다.

하나의 어플리케이션에선 단 하나의 스토어만을 만들어 사용한다.

여러 개의 스토어를 사용할 수도 있지만 권장되지 않는 사항.

2. 상태는 읽기 전용이다.

기존의 state 고유 값은 수정하지 않고 새로운 state 를 만들어 이를 수정하는 방식으로 업데이트를 한다.

​

이는 리덕스 고유의 불변성을 지키기 위함임.

3. 리듀서는 순수 함수여야 한다.

리듀서는 이전의 상태와 액션 객체를 파라미터로 받아야만 하며 이전의 상태는 절대로 건드리지 않고

​

변화를 일으킨 새로운 상태 객채를 만들어 반환해야 한다.

​

동일안 파라미터로 호출 된 리듀서는 언제나 같은 패턴의 결과값을 반환해야만 한다.