redux-toolkit 사용법 (2)

이번에는 이어서, CarForm 컴포넌트를 만들고, 어떻게 redux 의 값을 가져오는지 알아보겠습니다.

---

https://github.com/hi6724/redux-study/commit/e2a629d54d947f5215bb86b164210eb4fe29471b

Carform

import { useDispatch, useSelector } from "react-redux";
import { changeCost, changeName } from "../store";

function CarForm() {
  const dispatch = useDispatch();
  const { name, cost } = useSelector((state) => state.form);

  const handleNameChange = (event) => {
    dispatch(changeName(event.target.value));
  };

  const handleCostChange = (event) => {
    const carCost = parseInt(event.target.value) || 0;
    dispatch(changeCost(carCost));
  };

  return (
    <div className="car-form panel">
      <h4 className="subtitle is-3">Add Car</h4>
      <form>
        <div className="field-group">
          <div className="field">
            <label className="label">Name</label>
            <input
              className="input is-expanded"
              value={name}
              onChange={handleNameChange}
            />
          </div>

          <div className="field">
            <label className="label">Cost</label>
            <input
              className="input is-expanded"
              value={cost}
              onChange={handleCostChange}
              type="number"
            />
          </div>
        </div>
      </form>
    </div>
  );
}

export default CarForm;

---

useSelector

redux 에 저장되어 있는 값을 얻어오기 위해서 useSelector 를 사용했습니다. name 과 cost 값이 필요하고, 이 값은 form 안에 있습니다. 따라서 state.form 을 가져오고 ES6 문법을 사용해서, name 과 cost 를 가져오고있습니다.

---

dispatch

input 테그의 값이 바뀔 때마다, 리덕스의 값을 변경시켜주고 있습니다. 가장 위에서 useDispatch 훅을 사용해서 dispatch 를 초기화 시켜주고, dispatch 안에 호출하고 싶은 action 을 넣어주고 그 안에 payload 를 넣어줍니다.

---

onSubmit

https://github.com/hi6724/redux-study/commit/b2fc1a064f25f257c8096fd66a20c8b9c73f36d5