рдореЗрд░реЗ рдкрд╛рд╕ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдХреЛрдб рдХреЗ рд╕рд╛рде рдПрдХ рдЧреИрд░ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдкрд░рд┐рдпреЛрдЬрдирд╛ рд╣реИ:
.
_рдЗрдВрдбреЗрдХреНрд╕.рдЬреЗрдПрд╕_
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 рджреНрд╡рд╛рд░рд╛ рдЖрд░рдХреНрд╖рд┐рдд рдирд┐рдЬреА рдХреНрд░рд┐рдпрд╛ рдкреНрд░рдХрд╛рд░ рд╣реИрдВред
- рдХрд┐рд╕реА рднреА рдЕрдЬреНрдЮрд╛рдд рдХреНрд░рд┐рдпрд╛ рдХреЗ рд▓рд┐рдП, рдЖрдкрдХреЛ рд╡рд░реНрддрдорд╛рди рд╕реНрдерд┐рддрд┐ рд╡рд╛рдкрд╕ рдХрд░рдиреА рд╣реЛрдЧреАред
- рдпрджрд┐ рд╡рд░реНрддрдорд╛рди рд╕реНрдерд┐рддрд┐ рдЕрдкрд░рд┐рднрд╛рд╖рд┐рдд рд╣реИ, рддреЛ рдЖрдкрдХреЛ рдкреНрд░рд╛рд░рдВрднрд┐рдХ рд╕реНрдерд┐рддрд┐ рд╡рд╛рдкрд╕ рдХрд░рдиреА рд╣реЛрдЧреАред
- рдЗрди рдХреНрд░рд┐рдпрд╛ рдкреНрд░рдХрд╛рд░реЛрдВ рдХреЛ рд╕реАрдзреЗ рдЕрдкрдиреЗ рдХреЛрдб рдореЗрдВ рд╕рдВрджрд░реНрднрд┐рдд рди рдХрд░реЗрдВред
рдзрдиреНрдпрд╡рд╛рдж @gaearon - рдореИрдВ рдЗрд╕реЗ рд╣рдЯрд╛рдиреЗ рдХрд╛ рдЗрд░рд╛рджрд╛ рд░рдЦрддрд╛ рд╣реВрдВ, рдореИрдВрдиреЗ рдЗрд╕реЗ рдЬреЛрдбрд╝рд╛ рдХреНрдпреЛрдВрдХрд┐ рдореИрдВрдиреЗ рдЬреЛ рдХреНрд░рд┐рдпрд╛рдПрдВ рдмрдирд╛рдИ рд╣реИрдВ рд╡реЗ рдХрднреА рдирд╣реАрдВ рджреЗрдЦреА рдЬрд╛рддреА рд╣реИрдВ - рдореИрдВ рдХреНрдпрд╛ рдЧрд▓рдд рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ?
рдкреНрд░рд╢реНрдиреЛрдВ рдХреЗ рд▓рд┐рдП рдХреГрдкрдпрд╛ StackOverflow рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВред рд╣рдо рдмрдЧ рдФрд░ рдлреАрдЪрд░ рдЪрд░реНрдЪрд╛ рдХреЗ рд▓рд┐рдП рд╕рдорд╕реНрдпрд╛ рдЯреНрд░реИрдХрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░рддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рд╕рдорд░реНрдерди рдХреЗ рд▓рд┐рдП рдирд╣реАрдВред
рдХреЛрдб рдХреЗ рд▓рд┐рдП, рдпрд╣ рдПрдХ рд╕рд╛рдЗрдб рдЗрдлреЗрдХреНрдЯ ( cart.init()
) рдХрд╛ рдкреНрд░рджрд░реНрд╢рди рдХрд░рдХреЗ рдФрд░ рд░реЗрдбреНрдпреВрд╕рд░ рдХреЗ рдЕрдВрджрд░ рдПрдХ рдХреНрд░рд┐рдпрд╛ ( dispatch()
) рднреЗрдЬрдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░рдХреЗ Redux рдХреА рдмрд╛рдзрд╛рдУрдВ рдХрд╛ рдЙрд▓реНрд▓рдВрдШрди рдХрд░рддрд╛ рд╣реИред рдЗрд╕рдХреА рдЕрдиреБрдорддрд┐ рдирд╣реАрдВ рд╣реИ, рдЬреИрд╕рд╛ рдХрд┐ рджрд╕реНрддрд╛рд╡реЗрдЬрд╝реАрдХрд░рдг рдореЗрдВ рдПрдХ рд╕реЗ рдЕрдзрд┐рдХ рдмрд╛рд░ рдЙрд▓реНрд▓реЗрдЦ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред рд░реЗрдбреНрдпреВрд╕рд░ рд╢реБрджреНрдз рдХрд╛рд░реНрдп рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП, рдЗрд╕рд▓рд┐рдП рдЖрдкрдХреЛ рдХрд╛рд░реНрд░рд╡рд╛рдИ рднреЗрдЬрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдпрд╛ рдмрд╛рдж рдореЗрдВ рд╕рд╛рдЗрдб рдЗрдлреЗрдХреНрдЯ рдбрд╛рд▓рдирд╛ рдЪрд╛рд╣рд┐рдПред
рдпрджрд┐ рдЖрдк рд░реЗрдбреНрдпреВрд╕рд░ рдХреЗ рдЕрдВрджрд░ рдкреНрд░реЗрд╖рдг рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЖрдкрдХрд╛ рдХреЛрдб рд╡рд┐рдлрд▓ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рдпрджрд┐ рдпрд╣ рд╡рд┐рдлрд▓ рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИ, рддреЛ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЗ рдкрд╛рд╕ рдХрд╣реАрдВ рди рдХрд╣реАрдВ рддреНрд░реБрдЯрд┐ рдХреЛ рдирд┐рдЧрд▓рдиреЗ рдХрд╛ рд╡рд╛рджрд╛ рд╣реЛред рдХреЛрдб рдХреЗ рдЗрд╕ рд╕реНрдирд┐рдкреЗрдЯ рд╕реЗ рдЕрдзрд┐рдХ рдХрд╣рдирд╛ рдореБрд╢реНрдХрд┐рд▓ рд╣реИред
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдЕрд╕рдВрдмрдВрдзрд┐рдд рд▓реЗрдХрд┐рди
рдХрд┐рд╕реА рднреА рджрд┐рди рдЖрдкрдХрд╛ рдРрдк рддреЛрдбрд╝ рд╕рдХрддрд╛ рд╣реИред
рд╣рдо рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдХрд╣рддреЗ рд╣реИрдВ :