redux공부

todos.js

// Action value
const ADD_TODO = "ADD_TODO";

// Action Creator
export const addTodo = (payload) => {
  return { type: ADD_TODO, payload };
};

// initial State
const initialState = {
  todos: [
    {
      id: 1,
      title: "react를 배워봅시다.",
    },
    {
      id: 2,
      title: "redux를 배워봅시다.",
    },
  ],
};

// Reducer
const todos = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    default:
      return state;
  }
};

export default todos;

action creater: 액션 생성자이다. 컴포넌트 내에서 import해서 사용하며, 컴포넌트내에서 액션을 일으킬때 이걸 사용한다. export해줘야함
액션을 일으키려면 액션 type이 필요(필요에 따라 payload도!)
액션생성자에서는 단순히 내가 이 타입을 가지고 있는 리듀서(함수)를 실행시키겠다. 이다.왜냐면 리듀서에서 action.type을 받아서 그에 따라switch~case문을 실행하기때문.

reducer: state를 변경하는함수
매개변수로 기존상태와, 액션 객체를 받는다.
상태변경 후 최신상태를 store에 제공한다.
액션 생성자에서 넘겨준 타입과 페이로드를 받아 리듀서를 실행.

dispatch:컴포넌트 내에서 써준다. 내가 액션을 실행시키고 싶을때!
디스패치에 아까만든 액션생성자를 임포트해서 여기서 사용한다. 디스패치가 액션을 실행키는 것이기 때문.

이제 그걸(액션이 일어나 리듀서에서 변경된..) 조회하고 싶으면 useSelector((state)=>state.todos.todos)
1. todos:리듀서이름
2. todos:리듀서안의 우리가 조회하고픈 배열에 접근

AddForm.js

const AddForm = () => {
  const [title, setTitle] = useState("");
  const dispatch = useDispatch();

  const onSubmitHandler = (e) => {
    e.preventDefault();

    setTitle("");
    if (title === "") {
      alert("할 일을 입력하세요");
    } else {
      dispatch(
        addTodo({
          id: crypto.randomUUID,
          title: title,
        })
      );
    }
    setTitle("");
  };

  return (
    <StFormContainer>
      <form onSubmit={onSubmitHandler}>
        <label>Todos의 제목을 입력하세요</label>
        <StInput
          type="text"
          value={title}
          onChange={(e) => {
            setTitle(e.target.value);
          }}
        />
        <StButton>추가하기</StButton>
      </form>
    </StFormContainer>
  );
};

export default AddForm;