Redux

- Redux란?

  상태 관리 라이브러리.

 

- 왜 사용할까?

  계층에 관계없이 direct하게 state에 접근하기 위함. -> state가 특정 컴포넌트에 종속되는 것을 막을 수 있음.

  prop drilling 현상(props -> props -> props ...)을 막을 수 있음.

  store에서 state를 관리를 해줘서 유지보수 용이.

  컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다.

  

- 주요 특징

  1. 기본적으로 flux 패턴

 

   action -> dispatch -> reducer -> store -> view

 

   redux의 데이터 흐름은 동일하게 단방향으로 view(컴포넌트)에서 dispatch(store에서 주는 state를 바꾸는 함수)라는 함수를 통해 action이 발동하고 reducer에 정의된 로직에 따라 store의 state가 변화하고 그 state를 쓰는 view(컴포넌트)가 변하는 흐름.

 

2. Redux 규칙 (철학)

  1. Single Source of truth : 하나의 Application에는 하나의 Store만 존재해야 한다.

  2. State is read-only : Store 안에 저장된 상태는 읽기전용(수정 불가)이고, action에 의해서만 변경된다.

  3. Changes are made with pure functions : 변화를 일으키는 함수인 리듀서는 순수한 함수여야 한다.

    * 순수 함수란?

     - reducer 함수는 이전 state와 action 객체를 파라미터로 받는다.

     - 파라미터 외의 값에는 의존하면 안된다.

     - 이전 state는 절대로 건들지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.

     - 똑같은 파라미터로 호출된 reducer 함수는 언제나 똑같은 결과 값을 반환해야 한다.

 

 3. Redux 기본 용어 

   1) Action - 상태에 변화가 필요하다면 action을 일으켜야한다. action은 객체로 표현되며 type 필드는 반드시 가지고 있어야 함.

   2) Action Creator - action 객체를 만들어주는 함수

   3) Reducer - 현재 state와 action을 받아 조건에 맞게 새로운 state를 return 함.

   4) Store - state들이 관리 되는 곳.

   5) Dispatch - store의 내장 함수 중 하나이며, action 객체를 넘겨줘서 상태를 업데이트하는 유일한 방법이다.

   6) Subscribe - store의 내장 함수 중 하나이며, action이 dispatch 될 때마다 전달해준 함수를 호출한다.(React에서는 connect 함수 또는 useSelector Hook을 사용)

 

 

- 상태 변화 흐름