액션 생성함수는, 액션을 만드는 함수이다.
단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다..
우리가 액션객체의 value를 변경할 일이 생긴다면 어떨까?
하나하나식 찾아가면서 바꿔주면 되겠지 라고 생각하지만
프로젝트 규모가 굉장히 커서 100군데라면 어떨까?
이럴때 action creator를 쓰면된다.
// src/modules/counter.js
const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";
export const plusOne = () => {
return {
type: PLUS_ONE,
};
};
export const minusOne = () => {
return {
type: MINUS_ONE,
};
};
const initialState = {
number: 0,
};
const counter = (state = initialState, action) => {
switch (action.type) {
case PLUS_ONE:
return {
number: state.number + 1,
};
case MINUS_ONE:
return {
number: state.number - 1,
};
default:
return state;
}
};
export default counter;
여기서 이부분이 action creator이다.
export const plusOne = () => {
return {
type: PLUS_ONE,
};
};
plusOne이라는 함수가
return {
type: PLUS_ONE, <- 여기 action객체에 반환해주고있다.
const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE"; <-이것들은 상수로 값을주는 action벨류들이 있다.
그리고 그 action벨류를 사용해서 타입을 이용해서 상수를 반환하는 곳이
type: PLUS_ONE <-여기있다.
그리고
// src/App.js
import React from "react";
import { useSelector, useDispatch } from "react-redux"; // import 해주세요.
import { plusOne, minusOne } from "./redux/modules/counter"; // import 해주세요.
const App = () => {
const dispatch = useDispatch(); // dispatch를 사용할 수 있게 해주세요.
const number = useSelector((state) => state.counter.number); // useSelector를 사용해 number를 가져와주세요.
console.log(number);
return (
<div>
{number}
<button
onClick={() => {
dispatch(plusOne()); // dispatch를 사용해 액션을 발생시켜주세요.
}}
>
+1
</button>
<button
onClick={() => {
dispatch(minusOne()); // dispatch를 사용해 액션을 발생시켜주세요.
}}
>
-1
</button>
</div>
);
};
export default App;
이렇게
import { plusOne, minusOne } from "./redux/modules/counter"; 를 해준다음
onClick={() => {
dispatch(plusOne()); 라고 상수를 불러와주면 된다.