관리 메뉴

프론트엔드 정복하기

Redux | payload 관련 깨알팁 본문

React/라이브러리

Redux | payload 관련 깨알팁

GROWNFRESH 2021. 3. 23. 12:59

action.js 에서

const request = axios.get('url').then(res=>res.data)
  return {
    type: CHILD_TEAM_DATA_REQ,
    payload: request
  };

위와 같이 서버통신 응답 값을 reducer로 넘기면,

===>>> reducer에서 console.log(action.payload) 하면 ===> 아래와 같이 서버에서 받은 data가 바로 찍히는 데,

 

 

 

 

 

 

const request = axios.get('url').then(res=>res.data)
  return {
    type: CHILD_TEAM_DATA_REQ,
    payload: request,
    expandeTeam : ...,
    teamId : ....
  };

위처럼 리듀서에 넘길 key를 payload 외에도 더 생성하면,

===>>> reducer에서 console.log(action.payload) 했을 시, ===> Promise[ [[PromiseState]], [[PromiseResult]] ] 로 나타난다.

 

 

 

 

 

 

 

***

payload 외에 다른 키를 넘겨주고 싶어서 아래와 같이 해결하였음.

const request = axios.get('url').then(res=>{
  return{
    data : res.data,
    expandedTeam : ....
  });
  
  return {
    type: CHILD_TEAM_DATA_REQ,
    payload: request,
  };