๐ https://github.com/happypoulp/redux-tutorial/wiki
Tutorial 07 - dispatch async action 1
์ก์ ์ ์ด๋ป๊ฒ dispatchํ๊ณ ์ด๋ฐ ์ก์ ๋ค๋ก ์ด๋ป๊ฒ ๋ฆฌ๋์๋ฅผ ์ด์ฉํด์ ์ดํ๋ฆฌ์ผ์ด์ ์ ์ํ๋ฅผ ๋ฐ๊ฟ ์ ์๋์ง ๋ฐฐ์ ๋ค.
๊ทธ๋ฐ๋ฐ ์ฐ๋ฆฐ ์ง๊ธ๊น์ง ๋๊ธฐ ์ก์ , ์ฆ, ๋๊ธฐ๋ก ์ก์ ์ ๋ด๋ณด๋ด๋ ์ก์ creator์ ๋ํด์๋ง ๋ค๋ฃจ์ด์๋ค: ์ก์ ์ ํธ์ถํ๋ฉด ์ฆ์ ๋ฆฌํด๋จ
๋จผ์ ๊ฐ๋จํ ๋น๋๊ธฐ ์ฌ์ฉ ์์ ๋ฅผ ์์ํด๋ณด์:
- ์ ์ ๊ฐ โ2์ด ๋ค์ ์๋ ์ด๋ผ๊ณ ํดโ ๋ฒํผ์ ํด๋ฆญํ๋ค.
- ๋ฒํผ โAโ๋ฅผ ํด๋ฆญํ๋ฉด, 2์ด๊ฐ ์ง๋ ๋ค์ โ์๋ โ์ด๋ผ๋ ๋ฉ์ธ์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์ถ๋ค.
- 2์ด ๋ค, ๋ทฐ๋ โ์๋ โ ๋ฉ์ธ์ง๋ฅผ ๋ณด์ฌ์ค๋ค.
๋ฌผ๋ก ์ด ๋ฉ์ธ์ง๋ ์ฐ๋ฆฌ ์ดํ๋ฆฌ์ผ์ด์ ์ํ์ ์ผ๋ถ์ด๊ธฐ ๋๋ฌธ์ Redux store์ ์ ์ฅํด์ผํ๋ค. ๊ทธ๋ฐ๋ฐ ์ฐ๋ฆฌ๊ฐ ํ๊ณ ์ถ์ ๊ฑด action creator ๊ฐ ํธ์ถ๋๊ณ 2์ด ๋ค์ store์ ๋ฉ์ธ์ง๋ฅผ ์ ์ฅํ๊ฒ ํ๋ ๊ฒ์ด๋ค. (์๋๋ฉด ์ฐ๋ฆฌ๊ฐ ์ฆ์ state๋ฅผ ์ ๋ฐ์ดํธ ํ๊ฒ๋๋ฉด, state์ ๋ณ๊ฒฝ์ฌํญ์ ๊ตฌ๋ ํ๊ณ ์๋ - ์๋ฅผ ๋ค๋ฉด ๋ทฐ๊ฐ - ์ฆ์ ์๊ฒ๋๊ณ 2์ด ๋ค์ ๋๋ฌด ๋ฐ๋ก ๋ฐ์ํ๊ฒ ๋ ๊ฒ์ด๋ค).
์ง๊ธ๊น์ง ํ๋๋๋ก action creater๋ฅผ ํธ์ถํด๋ณธ๋ค๋ฉดโฆ
import { createStore, combineReducers } from 'redux'
var reducer = combineReducers({
speaker: function (state = {}, action) {
console.log('speaker ๊ฐ ์ ๋ฌ๋ฐ์ ์ํ', state, '์ ์ก์
', action)
switch (action.type) {
case 'SAY':
return {
...state,
message: action.message
}
default:
return state;
}
}
})
var store_0 = createStore(reducer)
var sayActionCreator = function (message) {
return {
type: 'SAY',
message
}
}
console.log("\n", 'Running our normal action creator:', "\n")
console.log(new Date());
store_0.dispatch(sayActionCreator('Hi'))
console.log(new Date());
console.log('SAY ์ก์
์ดํ store_0 ์ํ:', store_0.getState())
// Output (์ด๊ธฐํ output ์ ๊ฑด๋๋):
// Sun Aug 02 2015 01:03:05 GMT+0200 (CEST)
// speaker ๊ฐ ์ ๋ฌ๋ฐ์ ์ํ {} ์ ์ก์
{ type: 'SAY', message: 'Hi' }
// Sun Aug 02 2015 01:03:05 GMT+0200 (CEST)
// SAY ์ก์
์ดํ store_0 ์ํ: { speaker: { message: 'Hi' } }
โฆ ๊ทธ๋ฌ๋ฉด store๊ฐ ์ฆ์ ๊ฐฑ์ ๋์๋ค.
์ฐ๋ฆฌ๊ฐ ์ํ๋ action creator ๋ ๋๋ต ์ด๋ฐ์์ด๋ค:
var asyncSayActionCreator_0 = function (message) {
setTimeout(function () {
return {
type: 'SAY',
message
}
}, 2000)
}
๊ทธ๋ฐ๋ฐ ์ด๋ ๊ฒํ๋ฉด action creator ๋ action ์ ๋ฆฌํดํ์ง ์๊ฒ๋๊ณ , undefined
๋ฅผ ๋ฆฌํดํ๊ฒ ๋ ๊ฒ์ด๋ค. ๊ทธ๋์ ์ด๊ฑด ์ฐ๋ฆฌ๊ฐ ์ฐพ๋ ๋ฐฉ๋ฒ์ด ์๋๋ค.
์ฌ๊ธฐ ๊ผผ์๊ฐ ์๋ค: action์ ๋ฆฌํดํ๋ ๋์ ํจ์๋ฅผ ๋ฆฌํดํ ๊ฒ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ ์ ์ ํ ์์ ์ action์ dispatchํ ํจ์๊ฐ ๋ ๊ฒ์ด๋ค. ๊ทธ๋ฐ๋ฐ action์ dispatchํ ์ ์์ผ๋ ค๋ฉด dispatch ํจ์๊ฐ ์์ด์ผํ ๊ฒ์ด๊ณ , ์ด๋ฐ์์ผ ๊ฒ์ด๋ค:
var asyncSayActionCreator_1 = function (message) {
return function (dispatch) {
setTimeout(function () {
dispatch({
type: 'SAY',
message
})
}, 2000)
}
}
์ด๊ฒ์ ๋ค์ action์ ๋ฆฌํดํ์ง์๊ณ ํจ์๋ฅผ ๋ฆฌํดํ๋ action creator๊ฐ ๋์๋ค. ์ด๊ฑธ๋ก reducer๋ ์ฐ๋ฆฌ๊ฐ ๋ญ ํ๋ ค๋ ๊ฑด์ง ๋ชจ๋ฅผ ๊ฐ๋ฅ์ฑ์ด ํฌ์ง๋ง ๋น์ ์ ์ ๋ ์์ง ๋ชปํ๋ค. ์ด๋ค์ผ์ด ๋ฐ์ํ๋์ง ์ดํด๋ณด์โฆ
๋ค์: 08_dispatch-async-action-2.md