redux-tutorial/07_dispatch async action 1

๐Ÿ‘‰ https://github.com/happypoulp/redux-tutorial/wiki

Tutorial 07 - dispatch async action 1

์•ก์…˜์„ ์–ด๋–ป๊ฒŒ dispatchํ•˜๊ณ  ์ด๋Ÿฐ ์•ก์…˜๋“ค๋กœ ์–ด๋–ป๊ฒŒ ๋ฆฌ๋“€์„œ๋ฅผ ์ด์šฉํ•ด์„œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ๋ฅผ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋Š”์ง€ ๋ฐฐ์› ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์šฐ๋ฆฐ ์ง€๊ธˆ๊นŒ์ง€ ๋™๊ธฐ ์•ก์…˜, ์ฆ‰, ๋™๊ธฐ๋กœ ์•ก์…˜์„ ๋‚ด๋ณด๋‚ด๋Š” ์•ก์…˜ creator์— ๋Œ€ํ•ด์„œ๋งŒ ๋‹ค๋ฃจ์–ด์™”๋‹ค: ์•ก์…˜์„ ํ˜ธ์ถœํ•˜๋ฉด ์ฆ‰์‹œ ๋ฆฌํ„ด๋จ

๋จผ์ € ๊ฐ„๋‹จํ•œ ๋น„๋™๊ธฐ ์‚ฌ์šฉ ์˜ˆ์ œ๋ฅผ ์ƒ์ƒํ•ด๋ณด์ž:

  1. ์œ ์ €๊ฐ€ โ€œ2์ดˆ ๋’ค์— ์•ˆ๋…•์ด๋ผ๊ณ  ํ•ดโ€ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•œ๋‹ค.
  2. ๋ฒ„ํŠผ โ€œAโ€๋ฅผ ํด๋ฆญํ•˜๋ฉด, 2์ดˆ๊ฐ€ ์ง€๋‚œ ๋’ค์— โ€œ์•ˆ๋…•โ€์ด๋ผ๋Š” ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ๋‹ค.
  3. 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