redux-tutorial/08_dispatch async action 2

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

Tutorial 08 - dispatch async action 2

λ¨Όμ € dispatch-async-action-1μ—μ„œ ν–ˆλ˜ 비동기 action creatorλ₯Ό μ‹€ν–‰ν•΄λ³΄μž.

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 asyncSayActionCreator_1 = function (message) {
    return function (dispatch) {
        setTimeout(function () {
            dispatch({
                type: 'SAY',
                message
            })
        }, 2000)
    }
}

console.log("\n", 'Running our async action creator:', "\n")
store_0.dispatch(asyncSayActionCreator_1('Hi'))

// Output:
//     ...
//     /Users/classtar/Codes/redux-tutorial/node_modules/redux/node_modules/invariant/invariant.js:51
//         throw error;
//               ^
//     Error: Invariant Violation: Actions must be plain objects. Use custom middleware for async actions.
//     ...

μš°λ¦¬κ°€ λ§Œλ“  ν•¨μˆ˜λŠ” reducer κ·Όμ²˜μ—λ„ λͺ»κ°”λ‹€. κ·Έλ ‡μ§€λ§Œ μΉœμ ˆν•œ Reduxκ°€ μ•Œλ €μ£ΌλŠ” νŒμ„ 보면: β€œλΉ„λ™κΈ° μ•‘μ…˜μ—λŠ” μ»€μŠ€ν…€ν•œ 미듀웨어λ₯Ό 써라.”. μ΄λŒ€λ‘œ ν•˜λ©΄ 될 것 같은데 β€œλ―Έλ“€μ›¨μ–΄β€κ°€ 뭐지?

음 μ˜μ‹¬μ„ μ’€ λœμ–΄μ£Όμžλ©΄, μš°λ¦¬κ°€ λ§Œλ“  action creator asyncSayActionCreator_1 λŠ” 잘 μ§œμ—¬μ‘Œκ³  미듀웨어가 뭔지 μ΄ν•΄ν•˜κ³  μ–΄λ–»κ²Œ μ“°λŠ”μ§€ μ•Œκ²Œλ˜λ©΄ 곧 μš°λ¦¬κ°€ μ˜ˆμƒν–ˆλ˜λŒ€λ‘œ λ™μž‘ν•˜κ²Œλœλ‹€.

λ‹€μŒ: 09_middleware.md