안녕하세요 강의를 다 본뒤 추가적인 리액트 공부를 하고있습니다!
공부를 하다가 하루종일 막힌 부분이 있어 글 남깁니다. ㅠㅠ
2개의 리듀서를 combinereducers 를 한 후 dispatch로 타입과 payload를 넘기는 과정에서 생긴 문제입니다 . 코드를 간략하게 적어보면
먼저 reducer를 합쳤습니다 (index.js)
const rootReducer = combineReducers({
A리듀서, B리듀서
});
2. SET 타입을 통해 해당 payload로 받은 값을 초기값으로 넣어주려 합니다.
export export default function A리듀서(state = {number : 0}, action) {
let payload_data = action.payload;
switch (action.type) {
case SET:
return {
number : action.payload
}
+이때, 액션함수를 만들었습니다 (B도 동일한 구조)
export const A리듀서의 SET함수 = () => ({ type: SET });
3. 그 다음 X 컴포넌트에서 API로 서버에서 값을 가져와 그 값을 넣어주려 합니다.
//X컴포넌트
let dispatch = useDispatch();
useEffect (()=>{
서버에서 c, d 값을 받아옴
c 는 A reducer에 저장 d는 B reducer에 저장하고 싶음
if (c값 != null) {
const get_type = A리듀서의 SET함수()
dispatch( {type: get_type.type , payload : c } )
}
if (d값 != null) {
const get_type = B리듀서의 SET함수()
dispatch( {type: get_type.type , payload : d } )
}
},[c,d]) //useEffect 종료
이런식으로 코드를 작성하고 "A리듀서의 action"과 "B 리듀서의 action" 부분에 로그를 찍어보니
두개의 리듀서의 Action에 B리듀서에만 만들어가야 할 {type: get_type.type , payload : d } 부분이 나와
A 리듀서에서 정의한 타입이 없다는 에러가 나오는 상황입니다.
문법이 잘못된건지 useEffect가 연관이 있는건지 아니면 combineReducers 후 dispatch 할 때는 다른 문법이 있는건지
뭐가 문제인지 잘 모르겠습니다 ㅠㅠ
최종적으로는 A리듀서에는 dispatch로 {A리듀서의 SET type, c(값)},
B 리듀서에는 dispatch로 {B리듀서의 SET type, d(값)} 이 들어가게 하고 싶습니다.
긴 글 읽어주셔서 감사합니다
