Redux

import { createStore } from "redux";

store

Store는 data를 저장하는 곳

createStore

createStore는 Store(저장소)를 만든다.
createStore는 reducer를 요구한다.

const reducer = (state = 0) => {
  console.log(state);
  return state;
};
const countStore = createStore(reducer);

reducer

reducer는 함수여야 한다.
reducer는 data를 modify 해주는 함수로 reducer가 return하는 것은 application에 있는 data가 됨, 즉, action과 함께 return되는 것은 결국은 state가 된다는 뜻....!!!!!!

현재 state를 불러오는 것

const countStore = createStore(reducer);
console.log(countStore.getState());  // 0이 나옴

action

redux에서 function을 부를 때 쓰는 두 번째 parameter, 혹은 argument다.
reducer와 소통하기 위한 방법이다.

reducer에게 action을 보내는 방법 : store이름.dispatch({type: value})
type 이름을 바꿀 수는 없다. 무조건 type이 필요하다

const reducer = (state = 0 // 현재의 스테이트 값(처음에 넣는 것이 초기값 )
, action) => {
  console.log(state, action); // 0, {type: Hello}
  if (action.type === "Hello") {
    return state + 1;
  }
  return state;
};
const countStore = createStore(reducer);

countStore.dispatch({ type: "Hello" });
console.log(countStore.getState()); // 1. 현재의 state 값을 불러온다.

dispatch

reducer에게 action을 보내는 방법이다.

dispatch는 object 형식으로 넣어주어야 한다.

store이름.dispatch({key:value})

const addToDo = (text) => {
  return { type: ADD_TODO, text, id: Date.now() };
};
const deleteToDo = (id) => {
  return { type: DELETE_TODO, id };
};
const dispatchAddToDo = (text) => {
  store.dispatch(addToDo(text));
};

const dispatchDeleteToDo = (e) => {
  const id = parseInt(e.target.parentNode.id);
  store.dispatch(deleteToDo(id));
};

subscribe

store의 변화를 알고싶다면 사용

store.subscribe(func); // store안의 변화를 감지하면 func 실행

const onChange = () => {
  number.innerText = countStore.getState();
};

countStore.subscribe(onChange); // store에서 변화가 일어날 때마다 onchange 함수를 실행한다.

switch

if else 대신 쓰는 것.

const reducer = (state = 0, action) => {
  switch (
    action.type // 무조건 switch는 switch (action.type) {}
  ) {
    case "ADD": //if ADD
      return state + 1;
    case "MINUS": //else if MINUS
      return state - 1;
    default:
      //else
      return state;
  }
};

중요한 점!!

state 자체를 수정하는, 예를 들어 push나 slice 등을 이용하여 state를 mutate하는 것은 금지!!

무조건 새로운 배열을 만들어야 한다.

그래서 spread와 filter를 사용하는 것이다.

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [{ text: action.text, id: action.id }, ...state];
    case DELETE_TODO:
      return state.filter((todo) => todo.id !== action.id);
    default:
      return state;
  }
};