Redux

Redux : A Predictable State Container for JS Apps

Redux 세가지 원칙

1. Single source of truth ⇒ store
2. State is read-only ⇒ action
3. Changes are made with pure functions ⇒ reducer

Stroe : 상태가 관리되는 오직 하나의 공간

import { compose, createStore, applyMiddleware } from "redux";
import rootReducer from '../reducers/index';
import thunk from "redux-thunk";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
  : compose;
const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

export default store;

Action : Simple JavsScript Object로 정보를 전달하는 역할

export const addToCart = (itemId) => {
  return {
    type: ADD_TO_CART,
    payload: {
      quantity: 1,
      itemId,
    },
  };
};

Reducer : 현재 상태와 Action을 이용해 새로운 상태 생성

import { REMOVE_FROM_CART, ADD_TO_CART, SET_QUANTITY } from "../actions/index";
import { initialState } from "./initialState";

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return Object.assign({}, state, {
        cartItems: [...state.cartItems, action.payload],
      });
      break;
    case REMOVE_FROM_CART:
      return Object.assign({}, state, {
        cartItems: [...state.cartItems].filter(
          (el) => el.itemId !== action.payload.itemId
        ),
      });
      break;
    case SET_QUANTITY:
      let idx = state.cartItems.findIndex(
        (el) => el.itemId === action.payload.itemId
      );
      const copiedCartItems = [...state.cartItems];
      copiedCartItems[idx] = {
        ...copiedCartItems[idx],
        quantity: action.payload.quantity,
      };
      return Object.assign({}, state, {
        cartItems: copiedCartItems,
      });
      break;
    default:
      return state;
  }
};

export default itemReducer;

(Action 객체는 Dispatch로 전달되고, Dispatch는 Reducer를 호출해 새로운 State를 생성)

Flux Pattern

MVC구조의 단정을 보완하는 단반향 데이터 흐름

Redux Overview

Redux 장점

• 상태를 예측가능하게 만들어 준다.
• 유지보수에 용이하다.
• 디버깅이 용이하다.(action과 state log기록)
• 테스트가 용이하다.