[강의 시간 01:00]

Question

[강의 시간 01:00] actions.js에서 fetchNewsList().then( response => {    context.commit('SET_NEWS', response.data);    return response; }) 이부분의 경우 굳이 return response를 적지않아도 NewsView.vue에서 this.$store.dispatch('FETCH_NEWS').then(() => {})으로 구현이 가능한데 return response를 써줘야 then함수 체이닝이된다고 말씀하신거는 잘못 말씀해주신건가요? action에 등록한 함수들을 dispatch 하면 promise객체가 반환되기때문에 then체이닝이 가능한건가요?

캡틴판교 · Answer

안녕하세요 미야옹랑이님, 좋은 질문 감사합니다! 제가 해당 강좌를 촬영할 당시 `actions` 함수에서 `axios`호출 값을 리턴하고 있는 걸로 착각하고 조금 혼란스러운 설명을 드렸네요. 강의에서 의도한 것은 `this.$store.dispatch('FETCH_NEWS')`에서 호출 받은 데이터를 컴포넌트 단에서 접근하려면 `.then()`으로 체이닝해야 된다는 의미였습니다.   그리고 말씀해주신 것처럼 액션 함수에서 `return response`를 넣지 않더라도 `this.$store.dispatch('FETCH_NEWS').then()`으로 코드를 작성할 순 있지만, 해당 코드가 액션 함수 내부에서 실행된 비동기 처리 코드를 기다려주진 않습니다. 따라서, 비동기 처리 결과인 데이터 호출 값을 컴포넌트까지 넘겨주기 위해서는 `return 데이터 응답`코드를 넣어주셔야 합니다.   다시 정리하면 `actions` 함수의 호출 결과에는 반드시 Promise 객체가 있어야 하기 때문에 `return` 코드가 필요합니다 :)