redux에 대해 알아보고 간단한 테스트를 해봤습니다. 개인적인 기록 용도입니다.

1) redux

간단히 설명하자면 상태 관리 라이브러리로 액션(Action), 미들웨어(middleware), 리듀서(Reducer), 스토어(Store)가 있다.
미들웨어에선 리듀서가 액션을 처리하기 전 미들웨어에서 여러가지 작업들을 처리할 수 있다.

1.1) 리덕스 js에서 구현하기

import {createStore} from 'redux';

// action types

// action

// reducer

// store

// dispatch , discription

액션(액션 타입), 리듀서, 스토어 부분을 하나의 js 파일에서 작업하여 리덕스 테스트를 작업해보겠습니다.

1.1.1) action, action types

액션은 상태에 어떤 변화가 필요하면 액션이라는 것이 발생되는데 type 객체에 type : 'ADD_COMMENT'와 같이 지정을 해줘야한다.

// action types
const NUM_INCREASE = 'NUM_INCREASE';
const NUM_DECREASE = 'NUM_DECREASE';

// action 생성 함수
const numIncrease = data => {
  return { type: NUM_INCREASE, data }
}
const numDecrease = data => {
  return { type: NUM_DECREASE, data }
}

액션 생성 함수에서는 dispatch 액션을 발생시킬 때 파라미터로 전달할 함수이다.

action types 같은 경우는 어디서든 사용할 수 있기 때문에 따로 폴더를 분리하여 관리해서 export하여 사용하면 좋다.

1.1.2) reducer

리듀서는 변화를 일으키는 함수로 dispatch로 액션 발생시키면 현재 상태(state)와 액션 객체(action)을 받아오고, 두 값을 참조하여 새로운 상태를 만들어서 반환해줍니다.

// 초기값 설정
const initialState = { num : 17}
// reducer
const reducer = (state=intialState, action) => {
  switch(action.type) {
    case NUM_INCREASE :
      return { ...state, num: state.num + action.data };
    case NUM_DECREASE :
      return { ...state, num: state.num - action.data };
    default :
      return state
  }
}

1.1.3) Store

스토어는 한 개의 프로젝트에 단 하나의 스토어만 가질 수 있습니다.
스토어는 프로젝트의 상태에 관한 데이터들과 리듀서가 담겨져있습니다.
만약 스토어에서 두 개 이상의 리듀서를 담기를 원한다면 combineReducers 사용하여 rootReducer를 만들어 합쳐줘야합니다.

// 리듀서가 하나라면
const store = redux.createStore(counterReducer);
// 두 개 이상의 리듀서
const combineReducers = redux.combineReducers

1.1.4) description

store.subscribe(() => {
  console.log('state ==>>', store.getState());
}

store의 내장함수로 함수 형태의 값을 파라미터로 받아오고 액션이 dispatch가 됐을 때 전달한 함수가 호출되는 함수입니다.

getState() 를 사용하면 state값들을 확인할 수 있습니다.

1.1.5) dispatch

store의 내장함수로 store의 reducer에게 넘겨주는 역할을 하게 됩니다. 즉 dispatch에 전달한 액션 함수를 reducer에서 받아 해당하는 action.type 의 로직을 실행시킵니다.

store.dispatch(numIncrease(2));
store.dispatch(numDecrease(10));
store.dispatch(numIncrease(3));
store.dispatch(numIncrease(5));

1.1.6) middleware

액션 ==>> 리듀서 ==>> 스토어
액션 ==>> 미들웨어 ==>> 리듀서 ==>> 스토어

미들웨어는 위와 같이 액션이 디스패치가 되고 리듀서에서 해당 액션을 받아 처리하기 전에 추가적인 작업을 할 수 있는 영억입니다.

전달받은 액션을 어떠한 로직에 의해 취소시키거나, 단순히 콘솔에 출력, 다른 종류의 액션을 추가하는 등의 다양한 역할을 담당합니다.

아래는 간단하게 redux-logger를 사용하여 state값 변화 과정을 콘솔창에 출력해보겠습니다.

// import
const reduxLogger = require('redux-logger')
const logger = reduxLogger.createLogger();

// store
const store = redux.createStore(counterReducer,redux.applyMiddleware(logger));

// dispatch
store.dispatch(numIncrease(2));
store.dispatch(numDecrease(10));