redux-tutorial/04_get state

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

Tutorial 04 - get state

Redux ์ธ์Šคํ„ด์Šค์—์„œ ์ƒํƒœ๋ฅผ ์–ด๋–ป๊ฒŒ ๋ฐ›์„๊นŒ?

import { createStore } from 'redux'

var reducer_0 = function (state, action) {
    console.log('reducer_0 ์ด ์ „๋‹ฌ๋ฐ›์€ ์ƒํƒœ', state, '์™€ ์•ก์…˜: ', action)
}

var store_0 = createStore(reducer_0)
// Output: reducer_0 ์ด ์ „๋‹ฌ๋ฐ›์€ ์ƒํƒœ undefined ์™€ ์•ก์…˜ { type: '@@redux/INIT' }

Redux๊ฐ€ ๊ฐ–๊ณ ์žˆ๋Š” ์ƒํƒœ๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด์„œ getState๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค.

console.log('์ดˆ๊ธฐํ™” ์ดํ›„ store_0 ์˜ ์ƒํƒœ:', store_0.getState())
// Output: ์ดˆ๊ธฐํ™” ์ดํ›„ store_0 ์˜ ์ƒํƒœ: undefined

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ๋Š” ์•„์ง undefined ์ด๋‹ค. ๋‹น์—ฐํžˆ, reducer๊ฐ€ ์•„๋ฌด๊ฒƒ๋„ ์•ˆํ•˜๊ณ  ์žˆ์œผ๋‹ˆ๊นŒโ€ฆ 02_about-state-and-meet-redux.md ์—์„œ reducer๋ฅผ ์–ด๋–ป๊ฒŒ ์„ค๋ช…ํ–ˆ์—ˆ๋Š”์ง€ ๊ธฐ์–ตํ•ด๋ณด์ž.

ํ•˜๋‚˜์˜ ๋ฆฌ๋“€์„œ๋Š” ์‰ฝ๊ฒŒ๋งํ•ด ์ง€๊ธˆ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ์™€ ์•ก์…˜์„ ๋ฐ›๊ณ  ์ƒˆ๋กญ๊ฒŒ ์ˆ˜์ •๋œ ์ƒํƒœ๋ฅผ(์•„๋‹ˆ๋ฉด ๋ฐ›์€๋Œ€๋กœ) ๋ฆฌํ„ดํ•˜๋Š” ํ•จ์ˆ˜๋‹ค.

์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“  reducer๋Š” ์ง€๊ธˆ ์•„๋ฌด๊ฒƒ๋„ ๋ฆฌํ„ดํ•˜๊ณ  ์žˆ์ง€์•Š๋‹ค. ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ reducer๊ฐ€ ๋ฆฌํ„ดํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๊ฐ’์ด undefined ์ด๋‹ค.

reducer์— ์ƒํƒœ๊ฐ’์ด undefined ์ผ ๋•Œ ์ดˆ๊ธฐ ์ƒํƒœ๋ฅผ ๋ณด๋‚ด๋ณด์ž.

var reducer_1 = function (state, action) {
    console.log('reducer_1 ์ด ์ „๋‹ฌ๋ฐ›์€ ์ƒํƒœ', state, '์™€ ์•ก์…˜', action)
    if (typeof state === 'undefined') {
        return {}
    }

    return state;
}

var store_1 = createStore(reducer_1)
// Output: reducer_1 ์ด ์ „๋‹ฌ๋ฐ›์€ ์ƒํƒœ undefined ์™€ ์•ก์…˜ { type: '@@redux/INIT' }

console.log('์ดˆ๊ธฐํ™” ์ดํ›„ store_1 ์˜ ์ƒํƒœ:', store_1.getState())
// Output: ์ดˆ๊ธฐํ™” ์ดํ›„ store_1 ์˜ ์ƒํƒœ: {}

์˜ˆ์ƒ๋Œ€๋กœ, ์ดˆ๊ธฐํ™” ์ดํ›„ Redux์— ๋ฆฌํ„ด๋œ ์ƒํƒœ๋Š” ์ด์ œ {} ์ด๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด ์ฝ”๋“œ๋Š” ES6๋กœ ๋” ๊น”๋”ํ•˜๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

var reducer_2 = function (state = {}, action) {
    console.log('reducer_2 ๊ฐ€ ์ „๋‹ฌ๋ฐ›์€ ์ƒํƒœ', state, '์™€ ์•ก์…˜', action)

    return state;
}

var store_2 = createStore(reducer_2)
// Output: reducer_2 ๊ฐ€ ์ „๋‹ฌ๋ฐ›์€ ์ƒํƒœ {} ์™€ ์•ก์…˜ { type: '@@redux/INIT' }

console.log('์ดˆ๊ธฐํ™” ์ดํ›„ store_2 ์˜ ์ƒํƒœ:', store_2.getState())
// Output: ์ดˆ๊ธฐํ™” ์ดํ›„ store_2 ์˜ ์ƒํƒœ: {}

reducer_2์˜ ์ƒํƒœ ํŒŒ๋ผ๋ฏธํ„ฐ์— ๊ธฐ๋ณธ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ ์šฉํ•˜์˜€๊ณ  ๋”์ด์ƒ reducer์˜ ๋ฐ”๋””์—์„œ ์ƒํƒœ๊ฐ’์„ undefined๋กœ ๋ฐ›์ง€ ์•Š๊ฒŒ๋˜์—ˆ๋‹ค.

์•ก์…˜์„ dispatch ํ•˜์—ฌ reducer๋ฅผ ํ˜ธ์ถœํ•ด๋ณด๊ณ  ์•ก์…˜ ํƒ€์ž… 'SAY_SOMETHING' ์—์„œ ๊ฐ€์ƒ์œผ๋กœ ์ƒํƒœ๋ฅผ ์ˆ˜์ •ํ•ด๋ณด์ž.

var reducer_3 = function (state = {}, action) {
    console.log('reducer_3 ์ด ์ „๋‹ฌ๋ฐ›์€ ์ƒํƒœ', state, '์™€ ์•ก์…˜', action)

    switch (action.type) {
        case 'SAY_SOMETHING':
            return {
                ...state,
                message: action.value
            }
        default:
            return state;
    }
}

var store_3 = createStore(reducer_3)
// Output: reducer_3 ์ด ์ „๋‹ฌ๋ฐ›์€ ์ƒํƒœ {} ์™€ ์•ก์…˜ { type: '@@redux/INIT' }

console.log('์ดˆ๊ธฐํ™” ์ดํ›„ store_3 ์˜ ์ƒํƒœ:', store_3.getState())
// Output: ์ดˆ๊ธฐํ™” ์ดํ›„ store_3 ์˜ ์ƒํƒœ: {}

์ƒํƒœ์— ์•„์ง ์–ด๋–ค ์•ก์…˜๋„ dispatchํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒํƒœ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๊ณ  ๊ทธ๋Œ€๋กœ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด์ „ ์˜ˆ์ œ์—์„œ ์ฃผ๋ชฉํ•  ๋ถ€๋ถ„์ด ์žˆ๋‹ค.

  1. ์•ก์…˜์— type๊ณผ value ์†์„ฑ์ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ–ˆ๋‹ค. type์€ ๋Œ€๋ถ€๋ถ„์˜ flux์— ์กด์žฌํ•˜๋Š” ์ปจ๋ฒค์…˜์ด๊ณ  value ์†์„ฑ์€ ๋ฌด์—‡์ด๋“  ๋  ์ˆ˜ ์žˆ๋‹ค.
  2. ์ด๋Ÿฐ ํŒจํ„ด์„ ์ข…์ข… ๋ณด๊ฒŒ๋  ๊ฒƒ์ด๋‹ค. ์ด ํŒจํ„ด๋“ค๋กœ ๋ฆฌ๋“€์„œ๊ฐ€ ๋ฐ›์€ ์•ก์…˜์— ๋”ฐ๋ผ ์–ด๋–ค ์‘๋‹ต์„ ํ• ์ง€ ์„ ํƒํ•œ๋‹ค.
  3. switch๋ฅผ ์“ธ ๋•Œ, default: return state ๋ฅผ ๊ผญ ์จ์•ผํ•œ๋‹ค. ๋งŒ์•ฝ ์•ˆ์“ฐ๊ฒŒ๋˜๋ฉด, undefined๋ฅผ ๋ฆฌํ„ดํ•  ์ˆ˜๋„ ์žˆ๋‹ค. (๊ทธ๋ฆฌ๊ณ  ์ƒํƒœ๋ฅผ ์žƒ์–ด๋ฒ„๋ฆฐ๋‹ค.)
  4. ํ˜„์žฌ ์ƒํƒœ๊ฐ’๊ณผ ์ƒˆ๋กœ์šด ์ƒํƒœ๊ฐ’ { message: action.value }์„ ์–ด๋–ป๊ฒŒ ํ•ฉ์ณค๋Š”์ง€ ๋ณด๋ฉด, ์ด๊ฑด ์ „๋ถ€ ES7(Object Spread) ๋•๋ถ„: { ...state, message: action.value }
  5. ๋˜ํ•œ ES7 Object Spread ๋Š” ์šฐ๋ฆฌ ์˜ˆ์ œ์™€ ์ฐฐ๋–ก์ธ ๊ฒƒ์ด { message: action.value } ๋ฅผ ์–•์€ ๋ณต์‚ฌ๋กœ ์ƒํƒœ์— ๋ณต์‚ฌํ•œ๋‹ค. (์ƒํƒœ์˜ ์ฒซ ๋ฒˆ์งธ ๋Ž์Šค์˜ ์†์„ฑ์„ ์™„์ „ํžˆ ๋ฎ์–ด์“ด๋‹ค) ํ•˜์ง€๋งŒ ๋งŒ์•ฝ ์ด๋ณด๋‹ค ๋ณต์žกํ•œ ๊นŠ์€ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ์˜€๋‹ค๋ฉด, ์–ด๋–ป๊ฒŒ ์ƒํƒœ๋ฅผ ๊ฐฑ์‹ ํ•  ์ง€ ์„ ํƒํ•ด์•ผํ•œ๋‹ค:
    • Immutable.js ๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜
    • Object.assign ์„ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜
    • ์ˆ˜๋™ ๋จธ์ง€๋ฅผ ํ•˜๊ฑฐ๋‚˜
    • ์•„๋‹ˆ๋ฉด ํ•„์š”์— ๋”ฐ๋ผ ๋งž๋Š” ๋‹ค๋ฅธ ์ „๋žต์„ ์„ ํƒํ•ด์•ผํ•œ๋‹ค. Redux๋Š” ์ด๋Ÿฐ ์„ ํƒ์— ๊ฐ„์„ญํ•˜์ง€ ์•Š๋Š”๋‹ค. (๋‹ค์‹œ ๋งํ•˜์ง€๋งŒ, ๋ฆฌ๋•์Šค๋Š” ์ƒํƒœ ์ปจํ…Œ์ด๋„ˆ์ด๋‹ค)

reducer์—์„œ ์•ก์…˜์„ ๋‹ค๋ฃจ์–ด ๋ณด์•˜์œผ๋‹ˆ ์ด์ œ ์—ฌ๋Ÿฌ๊ฐœ์˜ reducer๋“ค์ด ์žˆ๊ณ  ๊ทธ๊ฒƒ๋“ค์„ ํ•ฉ์ณ๋ณด๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ์–˜๊ธฐํ•ด๋ณด์ž.

๋‹ค์Œ: 05_combine-reducers.md