๐ 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ํ์ง ์์๊ธฐ ๋๋ฌธ์ ์ํ๊ฐ์ด ๋ณ๊ฒฝ๋์ง ์๊ณ ๊ทธ๋๋ก๋ค. ๊ทธ๋ฐ๋ฐ ์ด์ ์์ ์์ ์ฃผ๋ชฉํ ๋ถ๋ถ์ด ์๋ค.
- ์ก์ ์ type๊ณผ value ์์ฑ์ด ์๋ค๊ณ ๊ฐ์ ํ๋ค. type์ ๋๋ถ๋ถ์ flux์ ์กด์ฌํ๋ ์ปจ๋ฒค์ ์ด๊ณ value ์์ฑ์ ๋ฌด์์ด๋ ๋ ์ ์๋ค.
- ์ด๋ฐ ํจํด์ ์ข ์ข ๋ณด๊ฒ๋ ๊ฒ์ด๋ค. ์ด ํจํด๋ค๋ก ๋ฆฌ๋์๊ฐ ๋ฐ์ ์ก์ ์ ๋ฐ๋ผ ์ด๋ค ์๋ต์ ํ ์ง ์ ํํ๋ค.
switch
๋ฅผ ์ธ ๋,default: return state
๋ฅผ ๊ผญ ์จ์ผํ๋ค. ๋ง์ฝ ์์ฐ๊ฒ๋๋ฉด,undefined
๋ฅผ ๋ฆฌํดํ ์๋ ์๋ค. (๊ทธ๋ฆฌ๊ณ ์ํ๋ฅผ ์์ด๋ฒ๋ฆฐ๋ค.)- ํ์ฌ ์ํ๊ฐ๊ณผ ์๋ก์ด ์ํ๊ฐ
{ message: action.value }
์ ์ด๋ป๊ฒ ํฉ์ณค๋์ง ๋ณด๋ฉด, ์ด๊ฑด ์ ๋ถ ES7(Object Spread) ๋๋ถ:{ ...state, message: action.value }
- ๋ํ ES7 Object Spread ๋ ์ฐ๋ฆฌ ์์ ์ ์ฐฐ๋ก์ธ ๊ฒ์ด
{ message: action.value }
๋ฅผ ์์ ๋ณต์ฌ๋ก ์ํ์ ๋ณต์ฌํ๋ค. (์ํ์ ์ฒซ ๋ฒ์งธ ๋์ค์ ์์ฑ์ ์์ ํ ๋ฎ์ด์ด๋ค) ํ์ง๋ง ๋ง์ฝ ์ด๋ณด๋ค ๋ณต์กํ ๊น์ ๋ฐ์ดํฐ ๊ตฌ์กฐ์๋ค๋ฉด, ์ด๋ป๊ฒ ์ํ๋ฅผ ๊ฐฑ์ ํ ์ง ์ ํํด์ผํ๋ค:- Immutable.js ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋
- Object.assign ์ ์ฌ์ฉํ๊ฑฐ๋
- ์๋ ๋จธ์ง๋ฅผ ํ๊ฑฐ๋
- ์๋๋ฉด ํ์์ ๋ฐ๋ผ ๋ง๋ ๋ค๋ฅธ ์ ๋ต์ ์ ํํด์ผํ๋ค. Redux๋ ์ด๋ฐ ์ ํ์ ๊ฐ์ญํ์ง ์๋๋ค. (๋ค์ ๋งํ์ง๋ง, ๋ฆฌ๋์ค๋ ์ํ ์ปจํ ์ด๋์ด๋ค)
reducer์์ ์ก์ ์ ๋ค๋ฃจ์ด ๋ณด์์ผ๋ ์ด์ ์ฌ๋ฌ๊ฐ์ reducer๋ค์ด ์๊ณ ๊ทธ๊ฒ๋ค์ ํฉ์ณ๋ณด๋ ๊ฒ์ ๋ํด ์๊ธฐํด๋ณด์.
๋ค์: 05_combine-reducers.md