Redux: рд╕реНрдЯреЛрд░ рдкрд░ рднреЗрдЬреЗ рдЬрд╛рдиреЗ рдкрд░ рдХрд╛рд░реНрд░рд╡рд╛рдИ рдХрднреА рдирд╣реАрдВ рджреЗрдЦреА рдЧрдИред

рдХреЛ рдирд┐рд░реНрдорд┐рдд 16 рдордИ 2016  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: reduxjs/redux

рдореЗрд░реЗ рдкрд╛рд╕ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдХреЛрдб рдХреЗ рд╕рд╛рде рдПрдХ рдЧреИрд░ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдкрд░рд┐рдпреЛрдЬрдирд╛ рд╣реИ:
.

_рдЗрдВрдбреЗрдХреНрд╕.рдЬреЗрдПрд╕_

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 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 рдХреА рдмрд╛рдзрд╛рдУрдВ рдХрд╛ рдЙрд▓реНрд▓рдВрдШрди рдХрд░рддрд╛ рд╣реИред рдЗрд╕рдХреА рдЕрдиреБрдорддрд┐ рдирд╣реАрдВ рд╣реИ, рдЬреИрд╕рд╛ рдХрд┐ рджрд╕реНрддрд╛рд╡реЗрдЬрд╝реАрдХрд░рдг рдореЗрдВ рдПрдХ рд╕реЗ рдЕрдзрд┐рдХ рдмрд╛рд░ рдЙрд▓реНрд▓реЗрдЦ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред рд░реЗрдбреНрдпреВрд╕рд░ рд╢реБрджреНрдз рдХрд╛рд░реНрдп рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП, рдЗрд╕рд▓рд┐рдП рдЖрдкрдХреЛ рдХрд╛рд░реНрд░рд╡рд╛рдИ рднреЗрдЬрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдпрд╛ рдмрд╛рдж рдореЗрдВ рд╕рд╛рдЗрдб рдЗрдлреЗрдХреНрдЯ рдбрд╛рд▓рдирд╛ рдЪрд╛рд╣рд┐рдПред

рдпрджрд┐ рдЖрдк рд░реЗрдбреНрдпреВрд╕рд░ рдХреЗ рдЕрдВрджрд░ рдкреНрд░реЗрд╖рдг рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЖрдкрдХрд╛ рдХреЛрдб рд╡рд┐рдлрд▓ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рдпрджрд┐ рдпрд╣ рд╡рд┐рдлрд▓ рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИ, рддреЛ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЗ рдкрд╛рд╕ рдХрд╣реАрдВ рди рдХрд╣реАрдВ рддреНрд░реБрдЯрд┐ рдХреЛ рдирд┐рдЧрд▓рдиреЗ рдХрд╛ рд╡рд╛рджрд╛ рд╣реЛред рдХреЛрдб рдХреЗ рдЗрд╕ рд╕реНрдирд┐рдкреЗрдЯ рд╕реЗ рдЕрдзрд┐рдХ рдХрд╣рдирд╛ рдореБрд╢реНрдХрд┐рд▓ рд╣реИред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

dmitry-zaets picture dmitry-zaets  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

jbri7357 picture jbri7357  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

parallelthought picture parallelthought  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

ilearnio picture ilearnio  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

cloudfroster picture cloudfroster  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ