프론트엔드 정복하기
Redux | payload 관련 깨알팁 본문
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,
};
'React > 라이브러리' 카테고리의 다른 글
Toolkit Selector 개념 정리 (0) | 2022.02.13 |
---|---|
redux에서 불변성을 유지하며 데이터 추가 및 삭제 하는법 (0) | 2021.03.28 |
React 뒤로가기, 캐시 API (0) | 2020.10.24 |
Redux-Persist (0) | 2020.10.23 |
React-Animation 라이브러리 (0) | 2020.07.10 |