리덕스 흐름 이해

리덕스 쓰는 이유: 기능 하나 구현하는데 prop 5개 넘겨준적이 있다. 게중 3개를 또 다른 컴포넌트에 넘겨주고. 이래서는 안된다는 생각이 들었다.
다른 선택지도 많이 있다. 실제 구현할 때는 recoil을 쓸 생각이지만 모르면 안될것 같다.

nomad coders 의 초보자를 위한 리덕스101

import { createStore } from "redux";

const ADD = "ADD";
const DELETE = "DELETE";

const addTodo = (text) => {
  return {
    type: ADD,
    text,
  };
};

const deleteTodo = (id) => {
  return {
    type: DELETE,
    id: parseInt(id),
  };
};
const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [{ text: action.text, id: Date.now() }, ...state];
    case DELETE:
      return state.filter((toDo) => toDo.id !== action.id);

    default:
      return state;
  }
};

const store = createStore(reducer);

export const actionCreators = {
  addTodo,
  deleteTodo,
};

export default store;

1. store를 생성한다.
2. reducer 함수에서는 아규먼트로 상태와 액션을 받는다. 액션에 따른 상태를 정의한다. switch문 가독성 때문에 추천.
3. 액션 생성함수를 만든다. 객체를 반환하는데 액션 타입과 나머지는 필요한거 있으면 담아서 넘겨줌
4. 액션타입은 문자열인데 오타 날 수도 있으니까 변수로 만듬
5. 컴포넌트에 connect 함수 연결 컴포넌트에 state와 action을 넘겨준다.