[ Redux ]

Redux는 Javascript에서 흔히 쓰이는 State Container이다.
React뿐만 아니라 어떠한 Javascript 라이브러리와도 연결할 수 있는 State 관리 라이브러리이다.

어플리케이션에 컨테이너에서 데이터와 비지니스로 로직을 분리하여 리액트가 순전히뷰에만 관여할 수 있게해준다.

리덕스는 잠재적으로 React대신 다른 뷰 라이브러리로 바꿀 수 있게 해주기 때문에 어플리케이션을 더욱 유연하게 해준다.

Action

• 어플리케이션에서 Store로 보내는 Data묶음
• store에 유일한 정보원, store.dispatch()를 통해 전달함
• action은 반드시 어떤 형태의 action이 실행될지 나타내는 type속성을 가져야함 (문자열, 상수)

Reducer

• action으로 인해 어플리케이션의 상태가 어떻게 바뀌는지 특정
• combineReducers() 유틸리티를 사용하면 서로 다른 리듀싱 함수들을 값으로 가지는 객체를 받아 createStore에 넘길 수 있는 하나의 리듀싱 함수로 바꿔줌
• reducer 내에서 하지 말아야 할 것들

1. 인수들을 변경 ( mutate ) 하기
2. API 호출이나 라우팅전환같은 사이드 이펙트 일으키기
3. Date.now() 나 Math.random() 같은 순수하지 않은 함수 호출

Store

• 어플리케이션의 상태 저장
• getState() 를 통해 상태에 접근
• dispatch( action ) 를 통해 상태 수정
• subscribe( listner)를 통해 리스너 등록
• redux 어플리케이션에서 단 하나의 스토어만 가질 수 있으며,
  데이터를 다루는 로직은 쪼개고 싶다면 스토어 대신 리듀서 조합 사용

불변성

Redux를 사용할 때 아주 중요한 이슈 중 하나가 바로 불변성이다. Redux에서는 어떤 데이터를 변경하려 할 때 그 데이터를 직접 변경하는 것이 아니고 내용이 바뀐 새로운 객체를 생성해야 한다.

예를 들어, '할 일' 목록을 요소로 갖는 배열에 새 '할 일'을 추가하는 Reducer가 있다고 하자. 아래와 같이 push() 메소드를 호출하여 추가해도 아무런 문제가 없어보이지만, 실제로 화면에는 새 할 일 목록이 출력되지 않는다.

function todos(state = ['react', 'redux'], action) {
  switch (action.type) {
    case 'ADD_TODO':
      state.push(action.text);
    default:
      return state;
  };
};

이렇게 하는 대신 스프레드 연산자를 사용하여 새로운 배열을 반환해야 한다.

function todos(state = ['react', 'redux'], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.text];
    default:
      return state;
  }
}

API

• createStore - 앱의 상태트리 전체를 보관하는 Redux 스토어 생성
• combineReducers - 헬퍼함수, 서로 다른 리듀싱 함수들을 하나로 합침
• applyMiddleware - Redux에 임이의 기능을 넣어 확장하는 방법으로 추천
• bindActionCreators - 값이 action 생산자인 객체를 받아서, 같은 키를 가지지만 각각의 생산자를 dispatch()로 감싸 바로 호출 가능한 객체로 만듬
• compose - 함수를 오른쪽에서 왼쪽으로 조합

Hook

• useSelector - 리덕스 스토어 상태에 접근
  const counter = useSelector( state => state.counter )
• useDispatch - 컴포넌트 내에서 dispatch 사용
  const dispatch = useDispatch()
• useStore - 컴포넌트 내에서 store 사용
  const store = useStore()

Redux DevTools

리덕스 개발자 도구를 사용하면 현재 스토어의 상태를 개발자 도구에서 조회할 수 있고 지금까지 어떤 액션들이 디스패치 되었는지, 그리고 액션에 따라 상태가 어떻게 변화했는지 확인할 수 있고 추가적으로 직접 디스패치할 수도 있다.
$ yarn add redux-devtools-extenstion