Redux 시작하기

actionType.js

export const UPDATE_FONT_SIZE = "update font size";
export const UPDATE_COLOR = "update color";

step1.js

import { createStore } from "redux";

function reducer(a, b) {
  console.log("i am reducer", a, b);

  if (a === undefined) {
    return {
      color: "white",
      fontSize: 15
    };
  } else {
    if (b.type === "update font size") {
      return {
        ...a,
        fontSize: b.size
      };
    } else if (b.type === "update color") {
      return {
        ...a,
        color: b.color
      };
    }
  }
}

const store = createStore(reducer);

console.log(store.getState());

store.dispatch({
  type: "update font size",
  size: 30
});

console.log(store.getState());

store.dispatch({
  type: "update color",
  color: "red"
});

step2.js

import { createStore } from "redux";
import { UPDATE_FONT_SIZE, UPDATE_COLOR } from "./actionType";
const InitializeState = {
  color: "white",
  fontSize: 15
};

function reducer(state = InitializeState, action) {
  switch (action.type) {
    case UPDATE_FONT_SIZE:
      return {
        ...state,
        fontSize: action.size
      };
    case UPDATE_COLOR:
      return {
        ...state,
        color: action.color
      };
    default:
      return { ...state };
  }
}

const store = createStore(reducer);

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

function actionCreator(type) {
  return { type };
}

function updateFontSize(size) {
  return {
    ...actionCreator(UPDATE_FONT_SIZE),
    size
  };
}

store.dispatch(updateFontSize(30));

store.dispatch({
  type: UPDATE_COLOR,
  color: "red"
});