index.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /** @module SZTMExcel */
  2. // Import dependencies
  3. import React from 'react'
  4. import ReactDOM from 'react-dom'
  5. import { createStore, combineReducers, bindActionCreators, compose } from 'redux'
  6. import { Provider, connect } from 'react-redux'
  7. /** react-router is not used in this project.
  8. import { browserHistory, Router, Route, IndexRoute } from 'react-router'
  9. import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
  10. */
  11. // Import the main app
  12. import Main from './Main'
  13. // Import the submodules
  14. import player from './player'
  15. import match from './match'
  16. /**
  17. * Redux Section
  18. */
  19. /** The root reducer is combined from all sub-module reducers */
  20. const rootReducer = combineReducers({
  21. player: player.reducer,
  22. match: match.reducer,
  23. })
  24. console.log('Root reducer:', rootReducer)
  25. /** The default state is combined from all sub-module states */
  26. const defaultState = {
  27. player: player.state,
  28. match: match.state,
  29. }
  30. console.log('Default state:', defaultState)
  31. /** The enhancer allows to use Redux development tools in Chrome */
  32. const enhancers = compose(
  33. window.devToolsExtension ? window.devToolsExtension() : f => f
  34. )
  35. console.log('Enhancers:', enhancers)
  36. /** Build the Redux store from the rootReducer, the defualtState and the enhancers. */
  37. const store = createStore(rootReducer, defaultState, enhancers)
  38. console.log('Store:', store)
  39. /** react-route is not used in this project.
  40. const history = syncHistoryWithStore(browserHistory, store)
  41. console.log('history:', history)
  42. */
  43. /** Collect the action creators from all modules in actionCreators */
  44. const actionCreators = {
  45. player: player.actions,
  46. match: match.actions,
  47. }
  48. /** Creates a function */
  49. function mapStateToProps (state) {
  50. const propState = {}
  51. Object.keys(state).forEach(key => {
  52. propState[key] = state[key]
  53. })
  54. console.log('Mapping state to props:', state, propState)
  55. return propState
  56. }
  57. function mapDispatchToProps (dispatch) {
  58. const boundActionCreators = {}
  59. console.log('ActionCreators', actionCreators)
  60. Object.keys(actionCreators).forEach(key => {
  61. boundActionCreators[`${key}Actions`] = bindActionCreators(actionCreators[key], dispatch)
  62. })
  63. console.log('Mapping dispatch to props:', dispatch, boundActionCreators)
  64. return boundActionCreators
  65. }
  66. const App = connect(mapStateToProps, mapDispatchToProps)(Main)
  67. /**
  68. * React-Router Section
  69. **/
  70. /** Combine the routes from all modules.
  71. const router = (
  72. <Provider store={store}>
  73. <Router history={history}>
  74. <Route component={App}>
  75. <Route path='/'>
  76. <IndexRoute component={demo_module.components.DemoModule} />
  77. <Route path='/project/:projectId' component={project.components.Project} />
  78. <Route path='/project' component={project.components.Project} />
  79. <Route path='/registermap/:registermapId' component={registermap.components.Registermap} />
  80. <Route path='/registermap' component={registermap.components.Registermap} />
  81. <Route path='/sample' component={Sample} />
  82. </Route>
  83. {demo_module.routes}
  84. <Route path='/login' />
  85. </Route>
  86. </Router>
  87. </Provider>
  88. )
  89. */
  90. const provider = (
  91. <Provider store={store}>
  92. <App />
  93. </Provider>
  94. )
  95. /**
  96. * Render the app
  97. **/
  98. ReactDOM.render(
  99. provider,
  100. document.getElementById('root')
  101. )