[Codestates FE] S3U4 - Redux

Redux의 데이터 흐름, FLUX 패턴

Redux

전역 상태를 관리해주는 상태 관련 라이브러리이다.

Flux Pattern

MVC 패턴의 문제를 해결하기 위해 Facebook이 발표한 Flux Pattern은 Action, Dispatcher, Store, View 순서로 동작하는 단방향 데이터 흐름을 가진 디자인 패턴이다. Client-Side 웹 애플리케이션을 만들기 위해 사용하는 디자인 패턴으로, 데이터 변화를 훨씬 예측하기 쉽게 만든다.

Redux가 상태 관리하는 순서

1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됨
2. 이 Action 객체는 Dispatch 함수의 인자로 전달됨
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해 줌
4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경
5. 상태가 변경되면, React는 화면을 다시 렌더링

Action

말 그대로 어떤 액션을 취할지 정의하는 객체

// payload가 필요 없는 경우
const increase = () => {
  return {
    type: 'INCREASE'
  }
}

// payload가 필요한 경우
const setNumber = (num) => {
  return {
    type: 'SET_NUMBER',
    payload: num
  }
}

Dispatch 에서 콜백함수가 실행 되면 Store가 업데이트 되는데, 이 콜백 함수를 실행 할 때 데이터가 담겨 있는 객체가 인수로 전달 되어야 한다. 이 전달되는 객체를 Action 이라고 하는데 Action 은 대체로 액션 생성자 (Action Creator)에서 만들어진다.

Dispatch

// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );

// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );

Dispatch는 Flux의 모든 데이터 흐름을 관리하는 허브 역할을 하는 부분이다. Action 이 발생되면 Dispatch 로 메시지(액션 또는 객체)가 전달되고, Dispatcher는 Action 을 보고 등록된 콜백 함수를 실행하여 Store에 데이터를 전달한다.

Reducer

Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수이다. 여기서 Reducer는 순수함수여야 한다.

const count = 1

// Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
const counterReducer = (state = count, action) => {

  // Action 객체의 type 값에 따라 분기하는 switch 조건문입니다.
  switch (action.type) {

    //action === 'INCREASE'일 경우
    case 'INCREASE':
            return state + 1

    // action === 'DECREASE'일 경우
    case 'DECREASE':
            return state - 1

    // action === 'SET_NUMBER'일 경우
    case 'SET_NUMBER':
            return action.payload

    // 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
    default:
      return state;
    }
}
// Reducer가 리턴하는 값이 새로운 상태가 됩니다.

Store

Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할을 하는데, Redux 앱의 state가 저장되어 있는 공간이다. 아래 코드와 같이 createStore 메서드를 활용해 Reducer를 연결해서 Store를 생성할 수 있다.

import { createStore } from 'redux';

const store = createStore(rootReducer);