한 컴포넌트의 useEffect 내부에서 dispatch 여러번 사용하기

[고은찬]

며칠째 막혀있어서 질문드립니다...

서버로부터 값 x와  y를 받은 후 그걸 각각 다른 reducer에 저장하려 하는데  그 과정에서

dispatch를 2번 하게 되면 값이 A reducer와 B reducer에 둘다 fire되어 최종 결과는 둘중에 하나만 값이 적용되고 하나는

초기값으로 값이 들어갑니다 .. 코드로 말씀드리면

 

----------dispatch 하는 컴포넌트-----------

function 컴포넌트(props) {

let dispatch = useDispatch();

 

//1. 커스텀 훅으로 데이터 x,y 를 받아오는 "함수"를 가져옴 

// 마지막 4번째 인자(x_api) : axios.get ~~ 함수가 반환됨 

const [x_value, x_error, x_loading, x_api] = useFetch('https://abcd.co.kr/api1/${idx}','get');

const [y_value,x_error,y_loading,y_api] = useFetch('https://abcd.co.kr/api2/${idx}','get');

 

//2. 위에서 커스텀 훅을 통해 받아온 x,y의 값을 받아오는 함수 실행시키기

useEffect(()=>{
x_api()

y_api()

},[])

 

//3. 함수가 실행되어 x,y의 값이 받아와졌음

// 이제 이 x,y값을 dispatch 해 redux에 등록한다. 

useEffect (())=>{

if (x_value!=null) {

dispatch({ type : 'x_set', payload : x })  // A reducer안에 x 란 데이터를 저장하고 싶음

// => 이때  A reducer와 B reducer 모두에게 dispatch 되어 스토어 안에 

//A reducer : {value: x}
//B reducer: {value: 초기값}  (B reducer에는 'x_set' 액션이 없으므로)

}

if (y_value!=null) {

dispatch({ type : 'y_set', payload : y})

// => 이때 다시한번 A reducer와 B reducer 모두에게 dispatch 되어 스토어 안에 

//A reducer : {value: 초기값} ( A reducer에는 'y_set' 액션이 없으므로)
//B reducer: {value: y} 

}

},[dispatch, y_value, y_value])

 

let redux_x = useSelector((state) => state.A reducer);

let redux_y = useSelector((state) => state.B reducer);

 

return (

//3.  그래서 결국에는 값이 이렇게 출력됨

<div> {redux_x} </div>  // 값 : 초기값

<div> {redux_y}</div> // 값 : y 

)

}

 

최종적으로는 한 컴포넌트 내에서

A reducer에는 x의 값을 넣고 

B reducer에는 y의 값을 넣고 싶은데 어떻게 해야 할지 도저히 모르겠습니다 ㅠㅠ 

 

 

[codingapple]

리듀서 코드는 잘 짜여져있나요 리듀서 안의 코드가 이상한게 아닐까요 

그리고 dispatch({ type : 'x_set', payload : x }) 여기서 dispatch 보내기 전에 x라는 변수도 잘 출력되는지 확인해야할듯요 

[고은찬]

네 dispatch 보내기 전에 x,y 값 다 잘들어오고 

y부분 주석처리하고  x만 dispatch 하면 잘 작동 됩니다! 반대로 x지우고 y만 해도 잘 작동되구요! 

 

리듀서 코드는 A reducer, B reducer 총 2개가 있고 a => b 만 다르고 나머지는 다 일치합니다.  (팔로워 수, 팔로잉 수 를 저장하기 위해 만듬) 

그리고 위 댓글의 type : 'x_set' 을 불러올 때 액션생성함수를 통해 생성해 쓰고 있습니다. 

(예시의 'x_set' = 'a/set' 입니다. ) 

--------------------------------------------

1. A reducer.js

//Actions

const SET_A = 'a/set';
const INCREASE= 'a/increase';
const DECREASE= 'a/decrease';

 

// 액션 생성 함수

export const set_a = () => ({ type: SET_A });
export const increase_a = () => ({ type: INCREASE });
export const decrease_a = () => ({ type: DECREASE });
 

//초기값

const initialState = {
number : 0
}

 

//reducer 

export default function A_reducer(state:initalState, action) {

console.log(action)

console.log(action)
let payload_data = action.payload;

switch (action.type) {
case SET_FOLLOWER :
return {
number : action.payload
}

case INCREASE:
return {
number: state.number +1
}

case DECREASE:
return {
number: state.number -1
}

default : // 기본일때는 초기 state 반환
return {
number : 99
}

}

}

 

 

[고은찬]

A reducer와 B reducer는 combineReducers() 을 통해 묶여있는 상태고

dispatch 하게되면 A와 B reducer에 모두 액션이 간다고 알고 있습니다 .

 

로그를 찍어보면 

x를 보내는 dispatch 시 x가 A,B 에 가서 A에만 적용되고

y를 보내는 dispatch시 y가 다시 A,B에 가서

y가 B에 적용되고 x가 적용되있던 A는 다시 초기값으로 변경(y를 받는 액션이 없으므로)  

되는거 같은데 어떻게 해야 

x -> A reducer 적용 

y -> B reducer 적용 

 

을 할 수 있을까요 ㅠㅠ

[codingapple]

function A_reducer(state:initalState,

이건 function A_reducer(state = initalState, 이것이 아닐까요

 

default : // 기본일때는 초기 state 반환
return {
number : 99
}

이것을

default :

  return state

로 바꿔봅시다 

[고은찬]

와 진짜 너무 감사합니다.........  

테스트해볼려고 저렇게 해놨었는데 

저거 때문 이었군요....

원리가

x dispatch -> A reducer로 x 값이 들어감 ( 기본값이 x로 설정됨 )

y dispatch -> B reducer로 y 값이 들어감 ( 이때 이미 x 의 값이 들어갔으므로 A에서 default로 빠져 그대로 x값이 나옴

 

이렇게 이해하면 되는걸까요?!

[codingapple]

리듀서 + dispatch는 특별한 작동방식이 있는게 아니라 그냥 함수 + if문일 뿐입니다

dispatch 날리면 모든 리듀서 안의 코드가 실행됩니다

리듀서 내부의 action.type 체크해주는 if문에 걸리면 그거 실행해주고 

안걸리면 else문 실행해줄 뿐입니다 

 

[글쓴이]

글