Vanilla Redux

Javascript로 만들어진 모든 어플리케이션에서 상태를 관리할 수 있도록 돕는 라이브러리이다.

createStore

• createStore에는 state를 변환하는 reducer를 인자로 받는다.
• 하나의 앱에는 하나의 Store만 가지는 것을 원칙으로 한다.
• 내부에 있는 함수 중 3가지를 사용한다.

const Store = createStore(reducer);

reducer

• state와 action을 인자로 받는다.
• action에 따라 state를 변경하여 리턴한다.
  • action은 dispatch가 보내는 트리거에 따라 동작한다.
• 리턴하는 state를 mutating해서는 안 된다.
  • state.push("b") - X
  • [...state, {state:"b"}] - O

const reducer = (state, action) => {
  switch (action.type) {
    case "A_type":
      return [...state, { state: `change A ${state}` }];
    case "B_type":
      return [...state, { state: `change B ${state}` }];
    default:
      return `not change ${state}`;
  }
};

getState

• Store가 가지고 있는 현재 state를 반환한다.

const currentState = Store.getState();

dispatch

• reducer의 action에 보내는 트리거 함수이다.
• type에 적힌 트리거에 따라 reducer 내부에서 state를 어떻게 변환할지 결정한다.

Store.dispatch({ type: "A_type" });

subscribe

• reducer가 동작할 때마다 반응하는 함수이다.

Store.subscribe(() => Store.getState());