모듈 기능 추가
이전에 해오던 카운터 프로그램의 counter.js 모듈에 state를 수정하는 기능을 넣어보자!
+1 기능 구현
리덕스에서 값의 수정은 리듀서에서 일어난다. 그렇다면 우리가 만약 counter.js 모듈에 있는 number에 +1을 하고 싶으면 어떻게 해야할까?
1. 리듀서에 보낼 명령 만들기
우리가 리듀서에게 명령을 보내기 전에 명령을 만들어야 한다. 리덕스에서는 그 명령을 action이라고 하고, 이 것은 객체 형태이다.
{type : "PLUS_ONE"}액션 객체는 반드시 type이라는 key를 가져야 한다!
2. 명령 (액션 객체) 보내기
명령을 만들었으니, 우리는 리듀서에게 명령을 보내줘야 한다. 이 때 우리는 useDispatch라는 훅을 사용한다.
import { useDispatch } from "react-redux";
const App = () => {
const dispatch = useDispatch();
return (
<div>
<button onClick={()=>{
dispatch({type:"PLUS_ONE"});
}}>+ 1</button>
</div>
);
};
export default App;이 때 생성된 dispatch는 함수이다!
onClick 이벤트 핸들러를 추가해 마우스를 클릭했을 때 dispatch가 실행되고, ()안에 있는 액션객체가 리듀서로 전달된다.
3. 액션 객체 받기
이제 액션 객체를 받은 리듀서에서 state값을 변경하는 코드를 작성해주면 된다.
// 리듀서
const counter = (state = initialState, action) => {
console.log(action);
switch (action.type) {
case "PLUS_ONE":
return {
number: state.number + 1,
};
default:
return state;
}
};PLUS_ONE이라는 case를 추가한다.
여기서 말하는 case란, action.type을 의미한다.
dispatch로부터 전달받은 action의 type이 "PLUS_ONE" 일 때 아래 return 절이 실행된다.
4. useSelector 로 변경된 state 값 확인
// App.js
const number = useSelector((state) => state.counter.number); App.js에서 useSelector를 통해 값을 읽어와 보았다!
