Redux -Action Value Creator
중앙 데이터 관리소인 store에서 리듀서는 store에 들어있는 state(상태)를 제어해. 들어온 state값으로 지지고 볶아서 내보내주거나 보관하는겨.
초기 리듀서는 이렇게 고지식했어.
// counter.js
// 초기 상태값(state)
const initialState = {
number: 0,
};
//원래라면
// const [number, setNumber] = useState(0); 지만 위처럼 바꾼거야.
// 리듀서 : "state에 변화를 일으키는"함수
// (1) state를 action의 type에 따라 변경하는 함수
// state를 action 안에 있는 type에 따라서 변경하는 작업
// input : state, action
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;
이 경우, 이 리듀서를 수백개의 컴포넌트에서 사용한다고 가정하면 type의 이름을 컴포넌트에서 잘못써줄 수 있으니 이런 하드 코드로 쓰면
휴먼에러들이 발생할 수 있으니 지양해 이런 방식.
그래서 action-creator, action value를 사용할 거야
변수 형태로 관리하는 거지. 유지보수에 좋고 휴먼에러도 적어져.
그렇게 개선된 리듀서는 타입을 변수화하고 함수에 값을 담아서 리턴을 해주도록 개선됐어.
-객체형태의 action객체가 발생하면서 그 안의 타입의 value를 변수로 관리하는 action value와
- 그 value를 필요한 곳에서도 쓸 수 있게 함수화해서 값을 리턴해줘서
필요한 곳에서 가져다 쓸 수 있게 export 할 수 있는 action creator가 추가된 형태야.
-src/redux/modules/counter.js
action creator, action value 들어간 개선된 리듀서
// counter.js
// action value
export const PLUS_ONE = "plus_one";
export const MINUS_ONE = "minus_one";
// action creator : action value를 return하는 함수
export const plusOne = () => {
return {
type: PLUS_ONE,
};
};
export const minusOne = () => {
return {
type: MINUS_ONE,
};
};
// 초기 상태값(state)
const initialState = {
number: 0,
};
//원래라면
// const [number, setNumber] = useState(0); 지만 위처럼 바꾼거야.
// 리듀서 : "state에 변화를 일으키는"함수
// (1) state를 action의 type에 따라 변경하는 함수
// state를 action 안에 있는 type에 따라서 변경하는 작업
// input : state, action
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;
사용 방법
-리듀서에서 필요한 값형태를 담은 타입을 리턴하는 export하는 함수를 불러서 필요한 곳에 dispatch로 담는 거야.
-App.jsx
import { useDispatch, useSelector } from "react-redux";
import { MINUS_ONE, minusOne, plusOne } from "./redux/modules/counter.js";
function App() {
// 여기에서 store에 접근해서, counter의 값을 읽어오고 싶어.
const counter = useSelector((state) => {
return state.counter;
});
console.log(counter.number);
// dispatch를 가져올거야.
const dispatch = useDispatch();
return (
<>
<div>현재 카운트 : {counter.number}</div>
<button
onClick={() => {
// +1을 해주는 로직을 써주면 돼.
// 이걸 써주려면 store에 있는 리듀서가 정해놓은 방식을 써야해.
dispatch(plusOne());
}}
>
+
</button>
<button
onClick={() => {
dispatch(minusOne());
}}
>
-
</button>
</>
);
}
export default App;
느낀 점
-개선된 리듀서는 변수로 관리하기 때문에 안의 형태가 바뀌어도 가져오는 값은 같아서 유지보수가 전보다 편해. 일일이 찾아가서 형태를 짜줘야하는 게 귀찮긴 하지만 전역에서 값을 쓸 수 있으니 좋은 것 같긴 해.
'개발일지' 카테고리의 다른 글
[TIL] 24_0201 Redux Ducks Pattern (0) | 2024.02.01 |
---|---|
[TIL] 24_0131 useState 와 useRef (0) | 2024.01.31 |
[TIL] 24_0129 useDispatch의 역할 (2) | 2024.01.29 |
[TIL] 24_0128 리덕스 세팅하면서 useSelector로 state확인하며 경고발생 (0) | 2024.01.28 |
[TIL] 23_0127 useContext(context API) (0) | 2024.01.27 |