Redux: Store에 λ°œμ†‘λ  λ•Œ μž‘μ—…μ΄ ν‘œμ‹œλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2016λ…„ 05μ›” 16일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: reduxjs/redux

λ‹€μŒ μ½”λ“œκ°€ ν¬ν•¨λœ λΉ„ 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μ—μ„œ μ˜ˆμ•½ν•œ λΉ„κ³΅κ°œ μž‘μ—… μœ ν˜•μž…λ‹ˆλ‹€.
  • μ•Œ 수 μ—†λŠ” μž‘μ—…μ˜ 경우 ν˜„μž¬ μƒνƒœλ₯Ό λ°˜ν™˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.
  • ν˜„μž¬ μƒνƒœκ°€ μ •μ˜λ˜μ§€ μ•Šμ€ 경우 초기 μƒνƒœλ₯Ό λ°˜ν™˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.
  • μ½”λ“œμ—μ„œ μ΄λŸ¬ν•œ μž‘μ—… μœ ν˜•μ„ 직접 μ°Έμ‘°ν•˜μ§€ λ§ˆμ‹­μ‹œμ˜€.

λͺ¨λ“  3 λŒ“κΈ€

관련이 μ—†μ§€λ§Œ

  • 이것은 극단적인 κ²½μš°μž…λ‹ˆλ‹€. index.jsλŠ” 앱을 λΆ€νŒ…ν•˜κ³  μš°λ¦¬λŠ” ꡬ독 μ€‘μž…λ‹ˆλ‹€.
  • ν•˜λ‚˜ μ΄μƒμ˜ μž‘μ—… λ ˆμ΄μ–΄λ₯Ό μΆ”κ°€ν•˜λŠ” λŒ€μ‹  Redux @ @INIT μž‘μ—…
  • μ΄λŠ” μ˜λ„ν•˜μ§€ μ•Šμ€ μ‹œλ‚˜λ¦¬μ˜€λ‘œ μ΄μ–΄μ§‘λ‹ˆλ‹€.

μ–Έμ œλ“ μ§€ 앱을 μ†μƒμ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€.

μš°λ¦¬λŠ” ꡬ체적으둜 λ‹€μŒκ³Ό 같이 λ§ν•©λ‹ˆλ‹€ .

  • Reduxμ—μ„œ μ˜ˆμ•½ν•œ λΉ„κ³΅κ°œ μž‘μ—… μœ ν˜•μž…λ‹ˆλ‹€.
  • μ•Œ 수 μ—†λŠ” μž‘μ—…μ˜ 경우 ν˜„μž¬ μƒνƒœλ₯Ό λ°˜ν™˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.
  • ν˜„μž¬ μƒνƒœκ°€ μ •μ˜λ˜μ§€ μ•Šμ€ 경우 초기 μƒνƒœλ₯Ό λ°˜ν™˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.
  • μ½”λ“œμ—μ„œ μ΄λŸ¬ν•œ μž‘μ—… μœ ν˜•μ„ 직접 μ°Έμ‘°ν•˜μ§€ λ§ˆμ‹­μ‹œμ˜€.

@gaearon 감사

μ§ˆλ¬Έμ€ StackOverflowλ₯Ό μ‚¬μš©ν•˜μ„Έμš”. μš°λ¦¬λŠ” 버그 및 κΈ°λŠ₯ 토둠을 μœ„ν•΄ 이슈 트래컀λ₯Ό μ‚¬μš©ν•˜λ €κ³  ν•˜μ§€λ§Œ 지원을 μœ„ν•΄ μ‚¬μš©ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

μ½”λ“œμ˜ 경우 λΆ€μž‘μš©( cart.init() )을 μˆ˜ν–‰ν•˜κ³  λ¦¬λ“€μ„œ λ‚΄λΆ€μ—μ„œ μž‘μ—…( dispatch() )을 μ „λ‹¬ν•˜λ €κ³  ν•˜μ—¬ Redux의 μ œμ•½ 쑰건을 μœ„λ°˜ν•©λ‹ˆλ‹€. λ¬Έμ„œμ— 두 번 이상 μ–ΈκΈ‰λœ κ²ƒμ²˜λŸΌ μ΄λŠ” ν—ˆμš©λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ¦¬λ“€μ„œλŠ” 순수 ν•¨μˆ˜μ—¬μ•Ό ν•˜λ―€λ‘œ μž‘μ—…μ„ μ „λ‹¬ν•˜κΈ° μ „μ΄λ‚˜ 후에 λΆ€μž‘μš©μ„ λ°°μΉ˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.

감속기 λ‚΄λΆ€μ—μ„œ λ””μŠ€νŒ¨μΉ˜ν•˜λ©΄ μ½”λ“œκ°€ μ‹€νŒ¨ν•©λ‹ˆλ‹€. μ‹€νŒ¨ν•˜μ§€ μ•ŠμœΌλ©΄ μ–΄λ”˜κ°€μ— 였λ₯˜λ₯Ό μ‚Όν‚€λŠ” Promiseκ°€ μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. 이 μ½”λ“œ μ‘°κ°μ—μ„œ 더 λ§Žμ€ 것을 λ§ν•˜κΈ°λŠ” μ–΄λ ΅μŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰