Redux

Redux란?

리덕스는 상태를 중앙 관리하기 위한 상태 관리 도구입니다. React뿐만 아니라 Angular, Vue에서도 사용할 수 있으며 리덕스는 전역 상태를 생성하고 관리하기 위한 라이브러리라고 볼 수 있습니다.
리덕스는 크게 전역 상태를 보관하는 store, 상태 저장소에 접근을 위한 reducer, 리듀서에 행동을 지시하는 action, 저장소에 보관된 상태를 가져오는 subscription으로 나뉘어져 있습니다.

store

전역 상태를 저장합니다. 자바스크립트 객체 형태로 저장되어 있으며 리듀서를 통하지 않고 접근할 수 없습니다. 하나의 어플리케이션에 하나의 저장소만 존재해야합니다. 리액트에서는 주로 index.js에 정의합니다. 저장소가 하나이기 때문에 리듀서 또한 하나로 존재해야합니다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./store";

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

reducer

저장소에 유일하게 접근할 수 있는 유일한 객체입니다. 들어오는 action에 따라 행동합니다. 리듀서 함수 내에서 반환되는 값이 상태 저장소에 저장됩니다. 단, 상태가 추가되는 것이 아닌 덮어씌워지게 되므로 전체 상태를 복사하여 상태를 갱신한 후에 반환해야 합니다.

import { ADD_TODO_LIST, DELETE_TODO_LIST } from "../types";

export const initialState = [
  {
    id: 0,
    text: "Todo-List 입니다.",
  },
];

export const todoList = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO_LIST:
      return [...state, action.payload];
    case DELETE_TODO_LIST:
      return [...action.payload];
    default:
      return state;
  }
};

action

액션은 리듀서에게 보내지는 저장소에 대한 행동입니다. 리듀서는 이 행동에 따라 저장소에 접근하여 정해진 동작을 하게 됩니다.

export const actionTodo = (value) => {
  return {
    type: ADD_TODO_LIST,
    payload: {
      id: autoId++,
      text: value,
    },
  };
};

subscription

서브스크립션은 저장소에 저장된 전역 상태를 가져옵니다. 따라서, 어느 컴포넌트에서도 저장소에서 상태값을 얻을 수 있습니다.
이를 통해 얻은 액션과 전역상태를 통해 컴포넌트는 원하는 동작을 할 수 있게 됩니다.