λ€μ μ½λκ° ν¬ν¨λ λΉ React νλ‘μ νΈκ° μμ΅λλ€.
.
_index.js_
import configureStore from 'js/store/configureStore'
/* Redux Imports */
import { createPage } from 'js/actions/page'
// Boot the App
document.addEventListener('DOMContentLoaded', function () {
const initialState = window.__INITIAL_STATE__
const pageId = window.__INITIAL_STATE__.page
const store = configureStore(initialState)
store.dispatch(createPage(pageId))
})
*actions/page.js*
function initPage (pageId) {
return {
type: 'CREATE_PAGE',
page: pageId
}
}
export function createPage (pageId) {
return dispatch => {
dispatch(initPage(pageId))
}
}
_리λμ/page.js_
/**
* Page Mediators get imported here
* Page Mediators are brokers that hold page initialization.
* The bundle includes all page mediators but they will not be activated
* unless thre reducer calls them.
*/
import * as cart from 'js/templates/cart'
/**
* This is a edge case, index.js boots the app and we are subscribing to
* a Redux @<strong i="11">@INIT</strong> action instead of adding one more layer of actions
* which leads to unintended scenarios.
*/
const page = (state = {page: []} , action) => {
console.log(state)
switch (action.type) {
case '@<strong i="12">@INIT</strong>':
console.log('initializing page:' + state.id)
console.log(state)
dispatch({type: 'CREATE_PAGE',page: state.id})
cart.init()
return state
case 'CREATE_PAGE':
console.log('initializing page:' + state.id)
cart.init()
return state
default:
return state
}
}
export default page
λ΄κ° κ°μ§ λ¬Έμ λ actions/page.js
κ° CREATE_PAGE
μμ
μ λ³΄μ§ λͺ»νλ€λ κ²μ
λλ€. κ·Έλλ?
κ΄λ ¨μ΄ μμ§λ§
- μ΄κ²μ κ·Ήλ¨μ μΈ κ²½μ°μ λλ€. index.jsλ μ±μ λΆν νκ³ μ°λ¦¬λ ꡬλ μ€μ λλ€.
- νλ μ΄μμ μμ λ μ΄μ΄λ₯Ό μΆκ°νλ λμ Redux @ @INIT μμ
- μ΄λ μλνμ§ μμ μλ리μ€λ‘ μ΄μ΄μ§λλ€.
μΈμ λ μ§ μ±μ μμμν¬ μ μμ΅λλ€.
μ°λ¦¬λ ꡬ체μ μΌλ‘ λ€μκ³Ό κ°μ΄ λ§ν©λλ€ .
- Reduxμμ μμ½ν λΉκ³΅κ° μμ μ νμ λλ€.
- μ μ μλ μμ μ κ²½μ° νμ¬ μνλ₯Ό λ°νν΄μΌ ν©λλ€.
- νμ¬ μνκ° μ μλμ§ μμ κ²½μ° μ΄κΈ° μνλ₯Ό λ°νν΄μΌ ν©λλ€.
- μ½λμμ μ΄λ¬ν μμ μ νμ μ§μ μ°Έμ‘°νμ§ λ§μμμ€.
@gaearon κ°μ¬
μ§λ¬Έμ StackOverflowλ₯Ό μ¬μ©νμΈμ. μ°λ¦¬λ λ²κ·Έ λ° κΈ°λ₯ ν λ‘ μ μν΄ μ΄μ νΈλ컀λ₯Ό μ¬μ©νλ €κ³ νμ§λ§ μ§μμ μν΄ μ¬μ©νμ§ μμ΅λλ€.
μ½λμ κ²½μ° λΆμμ©( cart.init()
)μ μννκ³ λ¦¬λμ λ΄λΆμμ μμ
( dispatch()
)μ μ λ¬νλ €κ³ νμ¬ Reduxμ μ μ½ μ‘°κ±΄μ μλ°ν©λλ€. λ¬Έμμ λ λ² μ΄μ μΈκΈλ κ²μ²λΌ μ΄λ νμ©λμ§ μμ΅λλ€. 리λμλ μμ ν¨μμ¬μΌ νλ―λ‘ μμ
μ μ λ¬νκΈ° μ μ΄λ νμ λΆμμ©μ λ°°μΉν΄μΌ ν©λλ€.
κ°μκΈ° λ΄λΆμμ λμ€ν¨μΉνλ©΄ μ½λκ° μ€ν¨ν©λλ€. μ€ν¨νμ§ μμΌλ©΄ μ΄λκ°μ μ€λ₯λ₯Ό μΌν€λ Promiseκ° μμ μ μμ΅λλ€. μ΄ μ½λ μ‘°κ°μμ λ λ§μ κ²μ λ§νκΈ°λ μ΄λ ΅μ΅λλ€.
κ°μ₯ μ μ©ν λκΈ
κ΄λ ¨μ΄ μμ§λ§
μΈμ λ μ§ μ±μ μμμν¬ μ μμ΅λλ€.
μ°λ¦¬λ ꡬ체μ μΌλ‘ λ€μκ³Ό κ°μ΄ λ§ν©λλ€ .