Redux

Redux는 상태관리 라이브러리이다.

Why Redux?

리덕스가 등장하기 이전 프론트엔드에서 데이터의 흐름을 관리하는 방식은 MVC 패턴으로 state가 변화하게 되면 View, Model, Controller에 이벤트가 발생하고 값이 변화하고 위 그림과 같이 여러모로 데이터 흐름이 복잡해진다.
이는 바로 '양방향 데이터 흐름' 때문이다.

React로 프로젝트를 할때면 부모의 state 값을 멀리 있는 자식 컴포넌트까지 전달하려면 해당 props를 사용하지 않는 컴포넌트를 거쳐가야 한다는 것은 리렌더링 하게 될 때 비효율적이기도하고 굉장히~ 귀찮은 작업이다.

프로젝트가 커질 수록 양방향 데이터 흐름을 제어하는 과정은 더욱 복잡해지고 그로 인한 state관리의 문제는 버그 발생과 같은 문제를 야기하게 된다.

이런 문제를 해결하고자 페이스북에서 '단방향 데이터 흐름' 패턴의 flux가 개발되었다.

flux의 데이터 흐름을 보면 View는 MVC 패턴과 달리 데이터를 직접 변경시키지 않고 Action만을 넘겨준 후, View에서 이뤄진 Action은 반드시 Dispatcher를 거쳐 데이터 변경을 진행하게 된다.

데이터 변경 이후 Store의 값을 저장하는 과정을 거쳐 View는 변경된 데이터를 전달 받는다.

이 과정은 기존의 흐름을 파악하기 어려웠던 부분의 관리를 예측 가능하게 해주었다.

Redux 3가지 원칙

1. App은 하나의 저장소(store)가 존재하며, 이 저장소(store)에는 App의 모든 상태들이 객체 트리 구조로 저장되어 있다.

2. state는 읽기 전용이다. state를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법이다.

3. 액션 객체를 처리하는 reducer는 순수 함수로 작성되야 한다.

Ducks 구조

redux를 사용할 때는 액션 타입, 액션 생성 함수, 리듀서 코드들을 각각 다른 파일에 작성하는 방법과 기능별로 묶어서 파일 하나에 작성하는 방법이 있다.

Ducks 구조는 redux module(action, action creator, reduer)를 기능별로 한 파일 안에 작성하는 방식이다.

Ducks 구조에서는

• export default를 사용해서 Reducer를 내보내야 한다.
• export를 사용해서 액션 생성 함수를 내보내야 한다.

Action

App의 store(스토어), 즉 저장소로 data를 보내는 방법이다.
하나의 객체로 이루어져있으며 액션 객체는 다음과 같은 형식이다.

{
  type: "ADD_VALUE",
  data: {
    id: 0,
    text: "리덕스 마스터하기"
  }
}

액션 객체에는 type이 필수이다.
store.dispatch()로 store에 보내진다.

Action Creator

액션을 만드는 함수이다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.
액션 객체생성 함수가 생성한 액션 객체는 리듀서를 거쳐 스토어를 업데이트 하게 된다.

const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

Reducer

액션을 실행시키는 순수 함수, 2가지 파라미터를 받아온다.
저장소에 유일하게 접근할 수 있는 유일한 객체이다.

Redux는 불변성을 유지하여야 한다. 리턴 값에 새롭게 추가할 내용이 있으면 spreed 연산자를 써야한다.

function todoApp(state = initialState, action) {
  switch (action.type) {
  case "ADD_TODO":
    return [...state, ...action.payload]
  default:
    return state
  }
}

Store

Redux에는 오직 1개의 store만 존재한다. 현재의 App상태와 Reducer가 있다.

import { createStore } from 'redux';
import todoApp from './reducers';

let store = createStore(todoApp);

Store의 상태를 확인하기 위해서는 getState를 사용하면 된다.

console.log(store.getState());

dispatch

store의 내장함수 중 하나이다.

store.dispatch({type: "ADD"});

dispatch() 함수는 reducer()에게 액션을 보낸다.

각각의 리듀서들은 자신에게 맞는 action 이 들어온다면 store의 상태를 교체하게 된다.