๋ด ๊ธฐ์ต์ด ๋ง๋ค๋ฉด @gaearon , Redux๊ฐ ๋ณ 500๊ฐ๋ฅผ ๋ฌ์ฑํ๋ฉด ์ด ๋ณ๊ฒฝ ์ฌํญ์ ์ ์ฉํ๊ฒ ๋ค๊ณ ๋ง์ํ์ จ์ต๋๋ค. :)
๋ํ ๋ฌธ์์ "์ฉ์ด" ์น์ ์ด ์์ด ๋ชจ๋ ์ฌ๋์ด ์ถ์ ํ ์ ์๋๋ก ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ์ ๋ ํนํ ์ฐ๋ฆฌ๊ฐ ํ์ฌ _์ ์ด๋_ ์ธ ๊ฐ์ง ๋ค๋ฅธ ๊ฒ์ ์ธ๊ธํ๊ธฐ ์ํด "๋์คํจ์ฒ"๋ผ๋ ๋จ์ด๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค๋ ์ฌ์ค์ ์๊ฒ ๋์์ต๋๋ค.
-1 ์ด ๋ฆฌํฌ์งํ ๋ฆฌ์ ํ์ต ๊ณก์ ์ ์ด๋ฏธ ๊ฐํ๋ฅด๊ฒ ๋๊ปด์ง๋๋ค. ์๋ก์ด ํ๋ญ์ค ์ฌ์ฉ์๋ฅผ ์ํ ์๋ก์ด ์ฉ์ด๋ฅผ ๋์ ํ์ฌ ๋ ๊ฐํ๋ฅด๊ฒ ๋ง๋ค์ง ๋ง์๋ค.
๋ด๋ถ์ ์ผ๋ก๋ ๋ฆฌ๋์๋ผ๊ณ ๋ถ๋ฅผ ์ ์์ผ๋ฉฐ ๊ณต๊ฐ์ ์ผ๋ก ์ ์ฅ์๋ก ์ ์งํ์ฌ ๋ ์ฝ๊ฒ ์ดํดํ ์ ์์ต๋๋ค.
์์งํ ์ง๊ธ์ด ๋ ํผ๋์ค๋ฌ์ด ๊ฒ ๊ฐ์์. ์์ ํ ์ผํ์ง๋ง IRL์ด "์์ "์ด ๋ฌด๊ตญ์ ์๊ฐ ๋ ์ ์๋ ๋ฐฉ๋ฒ์ ๋ํด ์๊ฐํ๋ ๊ฒ์ ์๋ง์ผ๋ก ๋ง๋ ์ฌ๋์ด ๋ช ๋ช ์์์ต๋๋ค.
์ ํต์ ์ธ Flux์์ "์ ์ฅ์"์ ์ฃผ์ ํน์ง์ 1) ์ํ๋ฅผ ์ ์งํ๊ณ 2) ๋ณ๊ฒฝ ์ด๋ฒคํธ๋ฅผ ๋ด๋ณด๋ด๋ ๊ฒ์ ๋๋ค. ๋ ๋ค Redux์์๋ ์ฌ์ค์ด ์๋๋๋ค.
๋๋ ์ฐ๋ฆฌ๊ฐ ์ฉ์ด๋ฅผ ๋ช
ํํ ํด์ผ ํ๊ณ ์ด๋ค ๊ฒฝ์ฐ์๋ ๋ ๋์ ์ด๋ฆ์ ์ฐพ์์ผ ํ๋ค๋ ๋ฐ ๋์ํฉ๋๋ค.
์ฒซ ๋ฒ์งธ ๋จ๊ณ๋ก JSDoc์ด ์์ด์ผ ํ๊ณ ์ฉ์ด ์น์
๋ ๋์์ด ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
์ผ๋ฐ์ ์ผ๋ก ์ผ์ ์์ค์ ์ผ๊ด์ฑ์ ์ ์งํด์ผ ํฉ๋๋ค.
FP์ฒ๋ผ ๋ค๋ฆฌ์ง ์์ง๋ง "์์ "๋ ์๋ ์ฉ์ด๊ฐ ์๋์ง ๊ถ๊ธํฉ๋๋ค.
๋๋ฉ์ธ?
OTOH๋ ์ด๋ฏธ Redux๋ผ๊ณ ๋ถ๋ฆฌ๋ฏ๋ก ์ ์ด๋ "๋ฆฌ๋์"๋ ๊ด๋ จ์ด ์์ต๋๋ค.
์ํ๋ฅผ ํ ๋จ๊ณ ์์ผ๋ก ์ด๋์ํค๋ "๋จ๊ณ ์
๋ฐ์ดํธ" ๋๋ "์คํ
ํผ"๋ ์ด๋ป์ต๋๊น? step
, update
๋๋ next
๋ผ๋ ํจ์๊ฐ ์๋ Elm ๋ฌธํ์์ ์ด๊ฒ์ด ์ฌ์ฉ๋๋ ๊ฒ์ ๋ณด์์ต๋๋ค.
๋๋ฉ์ธ์๋ node.js ์ํ๋ฌผ์ด ํฌํจ๋ฉ๋๋ค.
๊ทธ๊ฒ๋ค์ ๊ธฐ๋ฅํ๋ ๋ฐฉ์์ ์ ์ฅ์๊ฐ ์๋์ง๋ง ์ฌ์ ํ ํ๋ญ์ค ์ ์ฅ์์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ํ ๋ ผ๋ฆฌ๋ฅผ ๊ฑฐ๊ธฐ์ ๋ฃ์ต๋๋ค. ๊ทธ๋ค์ ํ๋ญ์ค ์คํ ์ด๊ฐ ์์ด์ผ ํ๋ ๊ฒ์ฒ๋ผ ์ํ ๊ด๋ฆฌ์์ ๋๋ค.
์ด๋ฆ์ ๋ณ๊ฒฝํ๋ ค๋ ๊ฒฝ์ฐ ๊ฐ์๊ธฐ๋ ๊ด์ฐฎ์ต๋๋ค.
ํนํ "๋ฆฌ๋์"๊ฐ ์ค์ ๋ก ๋ฌด์์ธ์ง์ ๋ํ ์ ํํ ์ค๋ช ์ด๊ธฐ ๋๋ฌธ์ :)
์ ๋ฐ์ดํฐ? ๊ฐ์๊ธฐ๋ณด๋ค ์ค๋ช ์ + ๋ ์๋ฌผ์ ์ธ ์๋ฆฌ.
๋๋ reducer
์ข์ํด
์ "๋ฆฌ๋์"๊ฐ ์๋ฌผ์ธ์ง ์ดํดํ์ง ๋ชปํ๋ ๊ฒ ๊ฐ์ต๋๋ค. ๋ ์ค๋ช ์ ์ธ ์๋ก์ด ์ฉ์ด๋ฅผ ๋ฐ๋ช ํ๋ ๊ฒ๋ณด๋ค ์ค์ ์ฉ์ด๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ ๋ซ์ง ์์ต๋๊น?
๋๋ ๋ ๋ค ์ ํจํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ๊ฒ์ ๋น์ ์ด ๊ทธ๊ฒ์ ๋ณด๋ ๊ด์ ์ ๋ฐ๋ผ ๋ค๋ฆ ๋๋ค: _reducer_ of action(into state) ๋๋ _updater_ of state.
"์ ๋ฐ์ดํฐ"๋ ๋์ฐ๋ณ์ด๋ฅผ ์๋ฏธํฉ๋๋ค. "Reducer"๋ ์ด์ ์ํ๋ฅผ ์์ ํ์ง ์๊ณ ์ ์ํ๋ฅผ ๋ฐํํ๋ค๋ ๊ฒ์ ๋ถ๋ช ํ ํฉ๋๋ค.
๊ทธ๊ฒ์ด ๋ด๊ฐ ์๊ฐํ๊ธฐ์ ์ข์ ์ ์ด๋ฉฐ, redux๊ฐ ๋์ฐ๋ณ์ด์ ํจ๊ป ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ์ง ์๋ ๋ฌธ์ ์ ๋์์ด ๋ ์ ์์ต๋๋ค.
FP์ ์ต์ํ์ง ์์ ์ฌ๋๋ค์๊ฒ Redux๋ฅผ ์น์ํ๊ฒ ์ ์งํด์ผ ํ๋ค๋ ์ ์ ๊ฐ์ฌํ์ง๋ง ๋ ๋์ ๋ฌธ์๋ก ์ด๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋ค. ํ์ฌ ๋ฌธ์๊ฐ ๋ง์์ ๋ค์ง๋ง ์ธ๋ป ๋ณด๊ธฐ์๋ ๋ค์ ์๋์ ์ ๋๋ค. ๊ณ ๊ธ ํญ๋ชฉ(๋ฏธ๋ค์จ์ด, ํซ ๋ฆฌ๋ก๋ฉ)๋ณด๋ค ์น์ํ ํญ๋ชฉ(์ก์ ์์ฑ์, ๋ฆฌ๋์ ๋ก์ง)์ ์ ๊ฒฝ์ผ๋ก ํ๋ ์ข์ ๋ฌธ์ ์ฌ์ดํธ๊ฐ ๋งค์ฐ ๋์์ด ๋ ๊ฒ์ ๋๋ค.
๊ทธ๋๋ ์ฌ๊ธฐ์์ ๋ค์๊ณผ ๊ฐ์ด ๋น ๋ฅด๊ฒ ์ฑ์ฅํ๋ ๊ฒ์ผ๋ก ํ๋จํ๋ฉด ์ฐ๋ฆฌ๋ ๋ฌด์ธ๊ฐ๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒํด์ผํฉ๋๋ค. :)
๋ ๋์ ๋ฌธ์์ ํจ๊ป ์ด๋ฌํ ์ผ์ด ๋ฐ์ํ๋ฉด "Stores"๋ฅผ "Reducers"๋ก ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
ํ์ ์์๋ "Flux์ ๋น์ทํ์ง๋ง ๋ ์ข์ต๋๋ค. ๊ฑฑ์ ํ์ง ๋ง์ธ์"๋ผ๋ ๋ถ์๊ธฐ๋ฅผ ์ ์งํ๋ ๊ฒ์ ๋๋ค. ๋๋ ์ฌ๋๋ค์ด ์ด๊ฒ์ด Flux์ ๋น์ทํ์ง๋ง Flux์ ์ข์ ์์ฑ ์ค ์ผ๋ถ๋ฅผ ๊นจ๋จ๋ฆฌ๋ ๊ฒ๊ณผ ์ ์ฌํ๋ค๊ณ ์๊ฐํ๋ ๊ฒ์ ์ํ์ง ์์ต๋๋ค. ๋๋ ๋ํ ๊ทธ๋ค์ด FP๋ฅผ ๋ฐฐ์ธ ํ์๊ฐ ์๋ค๊ณ ์๊ฐํ๋ ๊ฒ์ ์ํ์ง ์์ต๋๋ค. ์ฐ๋ฆฌ๊ฐ ๊ทธ๊ฒ์ ์ ์งํ ์ ์๋ ํ, ๋๋ ์ด ๋ณํ์ ๋ํด ๊ด์ฐฎ์ต๋๋ค.
๋ด๊ฐ ํ์ ํ์ง ๋ชปํ๋ ์ ์: Redux ํด๋์ค์ ์ด๋ฆ์ Store๋ก ๋ฐ๊พธ๋ฉด(์๊ฐํด ๋ณด์ธ์. ๋ ๊ฐ์ง ๋ชฉ์ ์ ์ํ๋ฅผ ์ ์งํ๊ณ ๋ณ๊ฒฝ ์ด๋ฒคํธ๋ฅผ ๋ด๋ณด๋ด๋ ๊ฒ์ ๋๋ค) ์ต์์ API๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
const store = createStore(reducers);
<Provider store={store} />
์ด๊ฒ์ ์์ด๋์ด๋ฅผ ๊ฝค ์ ์ ๋ฌํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ๋ฆฌ๋์๋ ์คํ ์ด ๋ก์ง์ด ๊ฐ๋ ๊ณณ์ด์ง๋ง ์คํ ์ด ์์ฒด๋ ์๋๋๋ค.
store.dispatch
๊ฐ ์๋ชป๋ ๋๋์ด ๋ค์ง๋ง ๋๋ ์ด๊ฒ์ ์ข์ํฉ๋๋ค.
์, ๊ทธ๊ฒ ์ ๊ฐ ์ ๋ง ์ข์ํ์ง ์๋ ํ ๊ฐ์ง์ด์ง๋ง ๋ค๋ฅธ ๋ฐฉ๋ฒ์ ์๋ฏธ๊ฐ ์์ต๋๋ค. store.getState()
, store.setState()
, store.subscribe()
์ง๊ธ ์๊ฐํด๋ณด๋ฉด ์ฐ๋ฆฌ๋ ์ค์ ๋ก "๋ฐฐํฌ"ํ๋ ๊ฒ์ด ์๋๋๋ค.
์, ๋ค์ด๋ฐ์ ํ ๋ผ๊ตด์
๋๋ค.
์ข์, ๊ทธ๋์ ์ฐ๋ฆฌ๊ฐ ์ง๊ธ๊น์ง ๊ฐ์ง๊ณ ์๋ ๊ฒ์:
ํ๋ฐ ๋ฌผ๋ฌ์์ ์ด๋ฆ์ ๋ค์ ์๊ฐํด ๋ณผ๊น์?
์ด์ฉ๋ฉด store.dispatch
๋ ๋์์ง ์์ ๊ฒ์
๋๋ค. ์ฐ๋ฆฌ๋ ๋ง์ Store ๋์ ์ ํ๋์ Store๊ฐ ์๊ณ ๋น์ ์ด Reducers์์ ๊ตฌ์ฑํ๋ค๊ณ ์ค๋ช
ํ ์ ์์ต๋๋ค. No Stores = ๋ณ๋์ Dispatcher๊ฐ ํ์ํ์ง ์์ผ๋ฏ๋ก dispatch
๋ Store์์ ๋ฐ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.
@gaearon ๋์ํฉ๋๋ค.
@emmenko ์ข์ ์์ฝ์ ๋๋ค. ๋ชจ๋ ์ฉ์ด ๋ถ์์ _action creators_์ _actions_๋ฅผ ๊ตฌ๋ถํด์ผ ํฉ๋๋ค. ๋ํ ๋ฏธ๋ค์จ์ด + ๋ฆฌ๋์๋ฅผ ํฌํจํ๋ _dispatcher_ ๋๋ _dispatch ์ ๋ต_๊ณผ _dispatch ์ฃผ๊ธฐ_๋ฅผ ํธ๋ฆฌ๊ฑฐํ๋ _dispatch_ ๋ฉ์๋๋ฅผ ๊ตฌ๋ณํด์ผ ํฉ๋๋ค.
์ด๋ ๊ฒ ํด๋ณด์:
์๋ก์ด ๋ฌธ์ ์์ ์ ์ฃผ๋ํ๊ณ ์ถ์ ์ฌ๋์ด ์์ต๋๊น? ์ฉ์ด์ง, README, ๊ฐ๋จํ "์คํํ๊ธฐ" ํํ ๋ฆฌ์ผ, ๊ทธ๋ฆฌ๊ณ ์ข ๋ ์ฌ์ธต์ ์ธ "์ค๊ณ ๊ฒฐ์ " ๊ฐ์ด๋์ ๊ฐ์ ๋ช ๊ฐ์ง ๊ตฌ์กฐํ ์์ ์ด ํ์ํฉ๋๋ค.
@gaearon ์์ํด์ ์ด ์ผ์ ์ด๋๊ฒ ์ต๋๋ค :) ์ด๋ฏธ ๊ฐ์๋ฅผ ์์ํ์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค:+1:
๋๋ ์์ํด์ ์ด ์ผ์ ์ด๋ ๊ฒ์ด๋ค
๊ฐ์ฌ ํด์! :+1: :+1: :+1:
๊ฐ์ธ์ ์ผ๋ก ์ต์ข ๊ฒฐ๊ณผ๋ก ๋ค์๊ณผ ๊ฐ์ ์๋ ์์ฑ ์น์ฌ์ดํธ๋ฅผ ๊ฐ๊ณ ์ถ์ต๋๋ค.
... ๊ทธ๋ฆฌ๊ณ ์์ผ๋ฉด ์ข์ ๊ธฐ๋ฅ์ผ๋ก:
docco
(์: jasmine
์ฒ๋ผ) ์์ค ์ฝ๋๊ฐ ๋ช
ํํ๊ฒ ์ค๋ช
๋๋๋กํ์ง๋ง ๋งํฌ๋ค์ด๊ณผ jsdoc๋ก ์์ํ๋ ๊ฒ์ ๋ฌผ๋ก ์ฒซ ๋ฒ์งธ ๋จ๊ณ์ ๋๋ค ;)
๋ค, ์ฒซ ๋ฒ์งธ ๋จ๊ณ๋ ๋ฌธ์๋ฅผ Markdown ํ์์ผ๋ก ์์ฑํ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๋ฌธ์๋ฅผ ์ ๋ง ์ข์ ๋ฌธ์ ์ฌ์ดํธ๋ก ์ด์ํ ์ ์์ต๋๋ค. :+1: JSDoc๋ ๋ง์ฐฌ๊ฐ์ง์ ๋๋ค. ์ค๋ ๋ฐค https://github.com/gaearon/redux/pull/87 ์์ ๋ง์ง๋ง์ผ๋ก ํ ๋ฒ ์ฐ๋ฌ๋ณด๊ฒ ์ต๋๋ค. ํ์ง๋ง ์ฝ๋๋ฒ ์ด์ค์์ ํจ์ ์ค๋ฒ๋ก๋๋ฅผ ์ ๊ฑฐํ์ง ์๋ ํ ์ด ์์ ์์ Flow ์ฃผ์์ด ๊ทธ๋งํ ๊ฐ์น๊ฐ ์๋์ง ํ์ ํ ์ ์์ต๋๋ค. (๋๋ ๋๊ตฐ๊ฐ Flow๊ฐ ๋ถํํ์ง ์๊ณ ์ฌ๋ฐ๋ฅด๊ฒ ์ ๋ ฅํ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋ฅด์ณ์ฃผ์ง ์๋ ํ.)
ํ๋ฆ์ด ์ฐ์ ์์๊ฐ ์๋ ๊ฒ ๊ฐ์์.
๊ฐ์๊ธฐ๋ผ๊ณ ๋ถ๋ฆฌ๋ ์์ ์ ๊ฒฝ์ฐ +1.
์ ๋ ์ด๋ฌํ ์ ์ธ์ , stateless things store๋ผ๊ณ ๋ถ๋ฅด๋ ๊ฒ์ ์ข์ํ์ง ์์์ต๋๋ค.
์๋ก์ด ์ด๋ฆ ์์ด๋์ด๊ฐ ๋ง์์ ๋ญ๋๋ค. ๋ํ ์ด๋ฆ์ ๋ณ๊ฒฝ ์ ์ ๊ฒ Connector
๊ฐ์์ Subscription
. Connector
๋ ๋งค์ฐ ์ผ๋ฐ์ ์ด๋ฉฐ redux์ ์ํ์ ๋์คํจ์ฒ๋ฅผ ์์์ ์ฐ๊ฒฐํ๋ค๋ ๊ฒ์ ์์ง๋ง ๊ตฌ๋
์ด ๋ฌด์จ ์ผ์ด ์ผ์ด๋๊ณ ์๋์ง ๋ ์ ์ค๋ช
ํ๋ค๊ณ ์๊ฐํฉ๋๋ค. ๊ตฌ๋
๊ณผ ํจ๊ป ๋์คํจ์ฒ๋ฅผ ๋ฐ๋ ๊ฒ์ ๋ค์ ๋ฌด๋ฆฌ์ง๋ง ๊ด์ฐฎ๋ค๊ณ ์๊ฐํฉ๋๋ค.
-1์ ๋ฆฌ๋์(reducer)๋ผ๊ณ ๋ถ๋ฆฌ๋ ์์ ์ ๊ฒฝ์ฐ ์ด๋ฆ์ผ๋ก ์ ์ฌ์ฉ์(์ ์ด๋ ๊ธฐ๋ฅ์ ํ๋ก๊ทธ๋๋ฐ ๋ฐฐ๊ฒฝ์ด ์๋ ์ฌ์ฉ์)์๊ฒ๋ ๋งค์ฐ ์ง๊ด์ ์ด์ง ์์ต๋๋ค. ์๋ง๋ Updater๋ Transformer๊ฐ ๋ ๋์ ๊ฒ์ ๋๋ค. ๋ ๋ช ํํ๊ฒ ํ๊ณ ์ถ๋ค๋ฉด Store Updater๊ฐ ๋ ๋์ ๊ฒ์ ๋๋ค.
"ํธ๋์คํฌ๋จธ"๋ ๊ฝค ์ฌ๋ฌ ๋ฒ ์ ์๋์์ต๋๋ค. ์ ๋ฐ์ดํฐ์ ๊ฐ์ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ํน์ฑ์ ์ ์ํ์ง ์์ผ๋ฉฐ ๋ฆฌ๋์๋ณด๋ค ์ ๊ทผํ๊ธฐ ์ฝ๊ณ Store์ "์ ์ฅ" ์๋ฏธ๋ฅผ ์ ๋ฌํ์ง ์์ต๋๋ค.
ํธ๋์คํฌ๋จธ๋ ์ด๋ ์ธ์?
๊ฐ์๊ธฐ์ ๊ฒฝ์ฐ +1
Twitter์์ @faassen์ด ์ธ๊ธํ ๊ฒ์ฒ๋ผ "๋ฆฌ๋์"์ ๋ํ ์ข์ ์ฃผ์ฅ์ ํ๋ก์ ํธ ์ด๋ฆ์ ๋ค์ ๋ถ๋ฅด๋ ๊ฒ์
๋๋ค. ์ฐ๋ฆฌ๋ โ์ด๊ฒ์ Flux์ ๋น์ทํ์ง๋ง ํ๋์ Store๊ฐ ์์ต๋๋ค. ์ฑ์ React ๊ตฌ์ฑ ์์๋ก ๊ตฌ์ฑํ ์ ์๋ ๊ฒ์ฒ๋ผ Redux์์๋ ํด๋น Store๋ฅผ Reducers๋ก ๊ตฌ์ฑํฉ๋๋ค. [].reduce()
: (state, action) => state
์ ๋ฌ๋ ์๋ช
์ผ์น ํจ์ ๋๋ฌธ์ ๊ฐ์๊ธฐ๋ผ๊ณ ํฉ๋๋ค. ๋ธ๋ผ๋ธ๋ผ๋ธ๋ผโ
์ฐ๋ถ์ฒ๋ผ ํผ์ง๊ณ ๋ค์๊ณผ ๊ฐ์ ๋จ์ด๋ฅผ ์ฌ์ฉํฉ๋๋ค.
ํ๋ก๊ทธ๋๋ฐ์ ๋ฌด์ํ๊ณ ๋ณํํ๊ณ ์ค์ด๋ ๊ฒ์ ๋ค๋ฆ ๋๋ค. ๊ฐ์ฅ ์ ํํ ์ด๋ฆ์ ์ ํํ๊ฒ ์ต๋๋ค.
๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ์ง ์๋๋ค๋ฉด ์์ ์ด๋ผ๊ณ ๋ถ๋ฅด์ง ๋ง์ญ์์ค.
ํ ํ์์์ ๋ค๋ฅธ ํ์์ผ๋ก ๋ณํํ๊ณ ์์ต๋๊น, ์๋๋ฉด ๋ง์ ๊ฐ์์ ํ๋๋ก ์ถ์ํ๊ณ ์์ต๋๊น?
๋ณ์๊ธฐ => ์ง๋
๊ฐ์๊ธฐ => ๊ฐ์
๋์๊ฒ ๊ฐ์์ฒ๋ผ ๋ค๋ฆฐ๋ค.
๋๋ reducers
! :+1:
๋๋ฆ ๋๋ฌด์์ ์๊ฐ์ ์ป์ผ์ญ์์ค. https://github.com/evancz/elm-architecture-tutorial#the -basic-pattern
๊ฐ์ฅ ์ข์ ๋จ์ด๋ update
์
๋๋ค. ์์ ์ ๋ง๋ ์๋๊ณ ํญ์ "๋ชจ๋ธ"์ด์์ต๋๋ค. ๋ฐํด๋ฅผ ์ฌ๋ฐ๋ช
ํ๊ฑฐ๋ ์ฌ๋๋ค์ ํผ๋์ค๋ฝ๊ฒ ํ ํ์๊ฐ ์์ต๋๋ค.
๊ทธ๋ค์ ์ ๋ฐ์ดํฐ๋ผ๊ณ ๋ถ๋ฅด๋ ๋์ ์ ๊ณ ๊ธฐ๋ ์ฌ๋๋ค์ด ๊ทธ๋ค์ด ๋์ฐ๋ณ์ด๊ฐ ๋์ด์ผ ํ๋ค๊ณ ์๊ฐํ ์๋ ์๋ค๋ ๊ฒ์ ๋๋ค. ๋ช ๋ช ์ด ๋์ฐ๋ณ์ด๊ฐ ์๋ ํน์ฑ์ ๋ช ํํ ํ๋ ๋ฐ ๋์์ด ๋ ์ ์๋ค๋ฉด ํฐ ๋ณด๋์ค๊ฐ ๋ ๊ฒ์ ๋๋ค.
ํ ํ์์์ ๋ค๋ฅธ ํ์์ผ๋ก ๋ณํํ๊ณ ์์ต๋๊น, ์๋๋ฉด ๋ง์ ๊ฐ์์ ํ๋๋ก ์ถ์ํ๊ณ ์์ต๋๊น?
์์ด๊ณ ์์ต๋๋ค. "ํ๋์ด ์ํ๋ฅผ ๋ค์ ์ํ๋ก ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ." ๊ฐ๋ ์ ์ผ๋ก ์ด๊ธฐ(์ ์๋์ง ์์) ์ํ์์ ๋ง์ ์์ ์ ์ค์ด๊ณ ๋ฉ๋ชจ์ด์ ์ด์ ์ ์ต์ ํ์ ๋ถ๊ณผํฉ๋๋ค.
์ํ ๋ณ์๊ธฐ
๊ฐ๋ฅํ ํ ์ฌ๋ฐ๋ช
/์ฌ๋ฐ๊ฒฌ์ ํผํ์ญ์์ค. ์ฌ๋๋ค์ ๊ทธ๊ฒ์ reduce
, scan
, fold
๋ฐ update
๋ผ๊ณ ๋ถ๋ ์ต๋๋ค.
reducer
์๋ฐ ์คํฌ๋ฆฝํธ ๊ด์ ์์ ์ ํํด ๋ณด์
๋๋ค ...
๊ทธ๊ฒ์ด ๋ ์ ํํ๋๋ผ๋ ๋ค๋ฅธ ์ธ์ด์ ๊ฐ๋
์์ ์ด๋ฆ์ ์ง์ ํ๋ ๊ฐ์ ๋ณด์ง ๋ง์ญ์์ค.
๊ทธ๊ฒ์ด ๋ฌด์์ด์ด์ผ ํ๋์ง์ ๋ํ ํ๊ณ ํ ์ ์ฅ์ ์์ง๋ง IMO๋ ๊ณ์ฐ ์ ํ์ ๊ฐ์ฅ ์ ํํ๊ฒ ๋ํ๋ด๋ ๊ฒ์ด์ด์ผ ํฉ๋๋ค. ๋๋ถ๋ถ์ ํ๋ก๊ทธ๋๋จธ์๊ฒ ์์ํ ๋จ์ด๋ผ๋ฉด ๋ฌธ์๋ก ์์ํ ์ ์์ต๋๋ค.
@vramana map
๊ฐ ์๋๋ผ reduce
. ์ด์ ์ ๋์ ๋ state
์ ์ action
๊ฐ์ ธ์์ ์ state
.
์ฑ์ ๋ชจ๋ ์์ ๋ฐฐ์ด์ด ์๋ ๊ฒฝ์ฐ ์ด ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์ต์ข ์ฑ ์ํ๋ก ์ค์ ๋๋ค.
function reducer(state, action) {
// switch (action.type) ...
// return state;
}
const finalState = allAppActions.reduce(reducer, initialState);
์ด์ ์ค์ ๋ก ๊ฐ์ง๊ณ ์๋ ๊ฒ์ stream
์ actions
์
๋๋ค. ์ด๋ ๊ฐ๋
์ ์ผ๋ก ๋ฐฐ์ด๊ณผ ๋์ผํ์ง๋ง ์๊ฐ์ด ์ง๋๋ฉด( stream
์ state
์ด).
๋๋ ๊ทธ๊ฒ์ ํฌ์(๋ฐ์ดํฐ ๊ตฌ์กฐ์ ๋ํ ์ด๋ฒคํธ ๋ก๊ทธ)์ผ๋ก ์๊ฐํ๊ณ ์ถ์ต๋๋ค.
DB ์ฌ๋๋ค์ ์ด๊ฒ์ "๊ตฌ์ฒดํ๋ ๋ทฐ"๋ผ๊ณ ๋ถ๋ ์ต๋๋ค.
๋๋ ์ค์ด๊ฑฐ๋ ์ ๋ ๊ฒ์ ์ข์ํ๋ฉฐ ๋ค๋ฅธ ์ปค๋ฎค๋ํฐ์์ ์ ์ดํดํฉ๋๋ค.
๋๋ ๊ฐ์๊ธฐ๋ณด๋ค Transformers๋ฅผ ํจ์ฌ ์ ํธํฉ๋๋ค. ์ผ๋ฐ์ ์ธ ์์ด ์ฌ์ฉ์์ ์ด๊ฒ์ด ์๋ฏธํ๋ ๋ฐ๋ ๋ถ๋ช ํฉ๋๋ค.
๊ฐ์๊ธฐ.
๋จผ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๊ณ ์๋ฐ์คํฌ๋ฆฝํธ์๋ [].reduce(reducer, initialState)
์์ต๋๋ค.
๋์งธ, Redu(cer)x๋ ์ด๋ฏธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ด๋ฆ์ ์์ต๋๋ค.
์
์งธ, https://blog.javascripting.com/2015/06/19/flux-no-more-stores-meet-reducer/ , ๋ค๋ฅธ ์ฌ๋๊ณผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ '๋ฆฌ๋์' ์ฉ์ด๋ฅผ ์ฌ์ฉํฉ๋๋ค.
๊ฐ์๊ธฐ๋ ์ ํํ๊ณ ๋ฐ๋๋ผ JS์์ ์ ๋ก๊ฐ ์์ต๋๋ค. ์ด๋ป๊ฒ ๊ฐ์ ํ ์ ์๋์ง ํ์คํ์ง ์์ต๋๋ค.
๊ฐ์๊ธฐ๋ ๊ทธ๋ด ๊ฒ์ ๋๋ค.
(#140์ ์งํ ์ํฉ์ ๋ฐ๋ฅด์ญ์์ค)
๋๋๋ก ๋๋ ๊ทธ๋ค์ "์์ "์ด๋ผ๊ณ ๋ถ๋ฅด๋ ์ค๋๋ ํ ๋ก ์ ๋ฐ๊ฒฌํ๊ณ ๋ค๋ฆ๊ฒ ๊ทธ๊ฒ์ด ์ผ๋ง๋ ์ด๋ฆฌ์๊ฒ ํผ๋์ค๋ฌ์ ๋์ง์ ๊ฒฝํํฉ๋๋ค.
"์ํ ์ปจํ ์ด๋"?
๋ค, ์ข์ ๋ณํ์์ต๋๋ค :)