[Redux] Redux의 기본 흐름

이번에는 Context API의 대안으로 떠올랐던 Redux의 기본 흐름에 대해서 살펴보려고 한다.

가장 쉬운 예시인 숫자 증가/감소로 설명하겠다.

1) Redux를 불러온다.

const redux = require('redux')

2) 스토어를 만든다.

const store = redux.createStore(""리듀서 이름"")

리덕스 라이브러리에 노출되는 방법이다. 파라미터로 리듀서가 들어가는데, 이는 어떤 리듀서가 스토어를 바꾸는지 스토어가 알아야 하기 때문이다.

3) 스토어에 들어갈 리듀서 함수를 작성한다.

// 1
const counterReducer = (state = { counter: 0 }, action) => {
  // ...
}

// 2
const initialState = { counter: 0 }
const counterReducer = (state = initialState, action) => {
  // ...
}

여기에서 매개변수 중 state에 기본적으로 들어갈 상태를 위와 같이 넣어주거나 따로 변수로 뺀 다음 그 변수를 넣어줘야 한다. 기본 상태가 많아진다면 2번 방식이 좀 더 시각적으로 편할 것이다.

 

3-1) 리듀서 내부 작성

const initialState = { counter: 0 }
const counterReducer = (state = initialState, action) => {
  if (action.type === 'INCREMENT') {
    counter: state.counter + 1,
  }
  if (action.type === 'DECREMENT') {
    counter: state.counter - 1,
  }
  return state;
}

action의 타입에 따라서 나눴는데, 지금은 짧지만 리듀서가 너무 길어질 경우에는 @reduxjs-toolkit을 불러와 createSlice로 처리해주면 된다. type에 따라 increment라면 counter 값을 (지금 상태 값 + 1)로, decrement라면 counter 값을 (지금 상태 값 - 1)로 처리한다. 그 두 경우가 아니라면 default 값인 return state;를 따라 기존 상태 그대로를 리턴한다.

리듀서는, 액션이 도착할 때마다 새로운 상태를 내보내야 한다.

입력: 이전 상태 + 디스패치된 액션

출력: 새로운 상태 객체

리덕스가 제공한 입력을 받아서 새 상태 객체라는 예상되는 출력을 내놓는다.

여기서 절대 Redux가 상태를 직접 변경해서는 안된다.

4) 구독하기

store가 subscribe 함으로써 매개체 함수를 실행한다. 5)에서 counterSubscriber를 구독하게 되면, 상태와 스토어가 바뀔 때마다 counterSubscriber 함수가 실행된다.

store.subscribe(""구독 매개체 함수 이름"")

5) 구독 매개체 함수 작성

const counterSubscriber = () => {
  const latestState = store.getState();
  console.log(latestState);
}

이 구독 매개체 함수는 store의 최신 상태를 가져온다(getState()). 함수가 트리거 된 이후 바뀐 최신 상태를 매번 확인할 수 있다. 즉 상태가 바뀔 때마다 함수가 실행된다는 것을 최신 상태를 보여줌으로써 알려주는 것이다.

6) 디스패치

store.dispatch({ type: "increment" });
store.dispatch({ type: "decrement" });

객체의 상태와 subscribe 대신에 dispatch를 호출하고, dispatch는 action을 dispatch한다. 파라미터는 주로 문자열을 사용하며 dispatch를 통해 리듀서 내부의 타입 값에 따라 실행된다.

 

결과

두 번 호출되었다. 그 이유는 dispatch가 두 번 있었기 때문.

 

전체 코드

import { createStore } from "redux";

const initialState = { counter: 0 }
const counterReducer = (state = initialState, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === "decrement") {
    return {
      counter: state.counter - 1,
    };
  }
  return state;
};

const store = createStore(counterReducer);

const counterSubscriber = () => {
  const latestState = store.getState();
  console.log(latestState);
};

store.subscribe(counterSubscriber);

store.dispatch({ type: "increment" });
store.dispatch({ type: "decrement" });