'redux'ãã{combineReducers}ãã€ã³ããŒãããŸã
import {routerReducer as router} from'react-router-redux '
'./modules/counter'ããã«ãŠã³ã¿ãŒãã€ã³ããŒãããŸã
'./doc'ããdocManageãã€ã³ããŒãããŸã
export default CombineReducersïŒ{//ãšã©ãŒãçºçããŸãã
ã«ãŠã³ã¿ãŒã
docManageã
ã«ãŒã¿ãŒ
}ïŒ
Uncaught TypeErrorïŒïŒ0ã_redux.combineReducersïŒã¯functionObject.defineProperty.value @ rootReducer.jsïŒ6__webpack_require__ @ bootstrap 8921782a133419f3cb76ïŒ585fn @ bootstrap 8921782a133419f3cb76ïŒ109exportsã§ã¯ãããŸããã esModule @ index.jsïŒ6__webpack_require @ bootstrap 8921782a133419f3cb76ïŒ585fn @ bootstrap 8921782a133419f3cb76ïŒ109ïŒç¡åé¢æ°ïŒ@ wrapActionCreators.jsïŒ6__webpack_require__ @ bootstrap 8921782a133419f3cb76ïŒ585fn @ esModule @ connect.jsïŒ18__webpack_require @ bootstrap 8921782a133419f3cb76ïŒ585fn @ bootstrap 8921782a133419f3cb76ïŒ109exportsã esModule @ index.jsïŒ10__webpack_require @ããŒãã¹ãã©ãã8921782a133419f3cb76ïŒ585fn @ããŒãã¹ãã©ãã8921782a133419f3cb76ïŒ109ïŒå¿åé¢æ°ïŒ@ããŒãã¹ãã©ãã8921782a133419f3cb76ïŒ631__webpack_require__ @ããŒãã¹ãã©ãã8921782a133419f3cb76ïŒ585ïŒå¿åé¢æ°ïŒ@ããŒãã¹ãã©ãã8921782a133419f3cb76ïŒ631ïŒå¿åé¢æ°ïŒ@ããŒãã¹ãã©ãã8921782a133419f3cb76ïŒ631
ããã«ã¡ã¯ïŒ æ®å¿µãªãããããã¯ããªããå©ããã®ã«ååãªæ å ±ã§ã¯ãããŸããã åé¡ãåçŸãããããžã§ã¯ããæäŸããŠãã ããã
ããã«ã¯ååãªæ å ±ããªãã䜿çšäžã®åé¡ã§ããå¯èœæ§ãé«ããããç· ãããããŸãã æ£ãã䜿çšæ³ã確èªããã«ã¯ãäŸãåç §ããŠãã ããã
ç§ããã£ãšæ å ±ãäžããããšãã§ããã®ã¯ããµã³ã¯ã®ãããªãnpmãã«ãã£ãŠããã€ãã®ã¢ãžã¥ãŒã«ãè¿œå ããããšã§ãã ãã®åŸããšã©ãŒãçºçããŸããã
åé¡ãåçŸãããããžã§ã¯ããæäŸããŠãã ããã ãããåçŸããæ¹æ³ãèŠã€ãããªãã®ã§ãæ®å¿µãªããç§ãããªããå©ããããšãã§ããæ¹æ³ã¯ãããŸããã
gitãäœããæ¬åœã«ããŸããããªãã£ãã®ã§ããã®ãã¡ã€ã«ãåŠçã§ããŸããããããã®ãšã©ãŒã®ããã«ãçŽ606KBã®ãµã€ãºã®zip圢åŒã®ãããžã§ã¯ããæ·»ä»ã§ããŸããã ãããžã§ã¯ããæ·»ä»ããä»ã®æ¹æ³ã¯ãããŸããïŒ
ãåé¡ãçºçããããããã®ãã¡ã€ã«ãåŠçã§ããŸãããããããžã§ã¯ãã³ãŒããæ·»ä»ããããšãããšãã³ãŒããæ·»ä»ããä»ã®æ¹æ³ã¯ãããŸããïŒ
ããã«ããå Žåã¯ãããããnode_modules
ãåé€ããŠãã ããã
GitHubã«ãªããžããªãäœæããã¢ã¿ããããã®ã§ã¯ãªããããã«ããã·ã¥ããããšãã§ããŸãã
ã npmpublish ããšå ¥åããåŸãã³ã³ãœãŒã«ã®å¿çã+
npm ERRïŒ ç¡é¢ä¿ïŒ [email protected] DïŒ\ react \ react-redux-starter-kitnode_modules \ inline-style-prefixer
npm ERRïŒ ç¡é¢ä¿ïŒ [email protected] DïŒ\ react \ react-redux-starter-kitnode_modules \ isomorphic-fetch
npm ERRïŒ ç¡é¢ä¿ïŒ [email protected] DïŒ\ react \ react-redux-starter-kitnode_moduleskeycode
npm ERRïŒ ç¡é¢ä¿ïŒlodashã [email protected] DïŒ\ react \ react-redux-starter-kitnode_modules \ lodash.merge
npm ERRïŒ ç¡é¢ä¿ïŒlodashã ã¹ãããã«@ 4.0.1DïŒ\ react \ react-redux-starter-kitnode_modules \ lodash.throttle
npm ERRïŒ ç¡é¢ä¿ïŒ [email protected] DïŒ\ react \ react-redux-starter-kitnode_modules \ react-event-listener
npm ERRïŒ ç¡é¢ä¿ïŒ [email protected] DïŒ\ react \ react-redux-starter-kitnode_modules \ recompose
npm ERRïŒ ç¡é¢ä¿ïŒ [email protected] DïŒ\ react \ react-redux-starter-kitnode_modules \ redux-logger
npm ERRïŒ ç¡é¢ä¿ïŒ [email protected] DïŒ\ react \ react-redux-starter-kitnode_modules \ simple-assign
npm ERRïŒ ç¡é¢ä¿ïŒ [email protected] DïŒ\ react \ react-redux-starter-kitnode_modules \ whatwg-fetch
@caojinli ïŒãããŸã§ã®ãšãããGithubã§ãªããžããªãäœæããŠå©çšå¯èœã«ããã®ã§ã¯ãªãããªããžããªãNPMããã±ãŒãžãšããŠå
¬éããããšããããã§ãã ãŸãããããã®ãå€éšã®ãèŠåã¯Reduxãšã¯äœã®é¢ä¿ããããŸãããã€ãŸããNPMã¯ã node_modules
ã«ããããã±ãŒãžãšpackage.jsonã«ãªã¹ããããŠããããã±ãŒãžã®éã«äžäžèŽãããããšã瀺ããŠããŸãã
ãããžã§ã¯ãã¯https://github.com/caojinli/prodocã®URLã«ããããšã©ãŒãcombinReduerãã§ãããžã§ã¯ããååŸã§ããŸããïŒ ã©ããããããšãã
@markeriksonç§ã¯ãŸã ãããžã§ã¯ããgithubã«å ¬éããŸãããã芪åã«å©ããŠããã ããã°å¹žãã§ããããããšãããããŸãã
@caojinli
ãã®äžã§npm install
ãå®è¡ãããšã
npm WARN EJSONPARSE Failed to parse json
npm WARN EJSONPARSE Unexpected end of input at 171:2
npm WARN EJSONPARSE
npm WARN EJSONPARSE ^
ããã¯ã package.json
ãå£ããŠããããšãæå³ããŸãã package.json
ã調ã¹ããšã scripts
ã»ã¯ã·ã§ã³ãçªç¶çµäºããŸãã
"deploy": "better-npm-run deploy",
"flow:check": "babel-node bin/flow-check",
"codecov": "cat coverage/*/lcov.info | codecov"
,
"betterScripts": {
JSONããã©ãŒãããããhttp://jsonlint.com/ã§ãšã©ãŒã®æ£ç¢ºãªå ŽæãèŠã€ããŸããã
äžè¶³ããŠãã}
ã«ã³ãã®åã«è¿œå ããåŸã npm install
ãå®è¡ããããšãã§ããŸããã
npm start
ãå®è¡ããåŸã次ã®ããã«ãªããŸããã
ERROR in ./src/redux/actions/manageDoc.js
Module not found: Error: Cannot resolve module 'isomorphic-fetch' in /Users/dan/p/prodoc/src/redux/actions
@ ./src/redux/actions/manageDoc.js 23:23-50
èµ°ã£ã
npm install --save isomorphic-fetch
ãããä¿®æ£ããŸãã
æåŸã«ã npm start
å床å®è¡ããåŸã次ã®ãšã©ãŒãçºçããŸããã
rootReducer.js:6 Uncaught TypeError: (0 , _redux.combineReducers) is not a function
Head.js:66 Uncaught TypeError: (0 , _reactRedux.connect) is not a function
ã«ãŒããã©ã«ããåºæºã«ãããã¹ã§ã¢ãžã¥ãŒã«ãã€ã³ããŒãã§ããresolve.root
Webpackãªãã·ã§ã³ãæå¹ã«ãªã£ãŠããããšãããããŸããã åé¡ã¯ããããžã§ã¯ãã«redux
ãšããããã redux
ãã¹ãŠã®ã€ã³ããŒãããå®éã®Reduxã§ã¯ãªããã®ãã©ã«ããŒã«è§£æ±ºãããããšã§ãã
Webpackæ§æããresolve.root
ãåé€ãããšãåé¡ãä¿®æ£ãããŸãã
å°æ¥çã«ã¯ãReduxã®åé¡è¿œè·¡ã·ã¹ãã ã§ã¯ãªããStackOverflowã§ãã®ãããªè³ªåãããããšããå§ãããŸãã Reduxã¯éåžžã«ç¹æ®ãªã©ã€ãã©ãªã§ãããåé¡ã¯ããããããã©ã®ããã«æ©èœããããæ·±ãç解ããã«ãäžç·ã«äœ¿çšãã20ã®ãã¯ãããžãŒãçµã¿åãããŠäœ¿çšââããããšã«é¢é£ããŠããããã§ãã å人çã«ã¯ããã®ãããžã§ã¯ãã®æ§æã§äœãèµ·ãã£ãŠããã®ãããããããªãã®ã§ãReduxã®ãããªã©ã€ãã©ãªãåŠã¶ãšåæã«ãã®äŸã䜿çšããããšã¯ãããŸããã ãã®æ§æã¯å¿ èŠãããŸããã
ãã€ã©ãŒãã¬ãŒããããžã§ã¯ãããæ§æãã³ããŒããŠè²Œãä»ãããšãåžžã«ãã®ãããªãããã°ãé£ããåé¡ãçºçããŸãã ããªããããããäœã£ãŠããã®ã§ã¯ãªããšãã誰ãã®æ§æ決å®ãèŠéããã¡ã§ãã 䜿çšãããã¹ãŠã®ãã¯ãããžãŒãç解ããŠããªãéããå®åãããžã§ã¯ãã䜿çšããªãã§ãã ããã
Reduxã®åŠç¿ãéå§ããã®ã«å®åæã¯å¿ èŠãããŸããã Reduxã®åŠç¿ãéå§ãããã ãã®å Žåã¯ããã®HTMLããŒãžãã³ããŒããŠåŠç¿ãéå§ããŠ
@gaearonãŸããããããšãããããŸãããããªãã®è¿äºããå€ãã®ããšãåŠã³ãŸããã
webpackæ§æãã¡ã€ã«ããresolve.rootãç¡å¹ã«ãããšã以åã¯ããŸãæ©èœããå¯èœæ§ã®ããããã€ãã®æ°ãããšã©ãŒãçºçããŸããã
./src/redux/configureStore.jsã®ãšã©ãŒ
ã¢ãžã¥ãŒã«ãèŠã€ãããŸããïŒãšã©ãŒïŒDïŒ\ react \ react-redux-starter-kit \ srcreduxã®ã¢ãžã¥ãŒã« 'containers / DevTools'ã解決ã§ããŸãã
@ ./src/redux/configureStore.js 29ïŒ75-105
./src/containers/Root.jsã®ãšã©ãŒ
ã¢ãžã¥ãŒã«ãèŠã€ãããŸããïŒãšã©ãŒïŒDïŒ\ react \ react-redux-starter-kit \ srccontainersã®ã¢ãžã¥ãŒã« 'containers / DevTools'ã解決ã§ããŸãã
@ ./src/containers/Root.js 120ïŒ25-55
./src/routes/index.jsã®ãšã©ãŒ
ã¢ãžã¥ãŒã«ãèŠã€ãããŸããïŒãšã©ãŒïŒDïŒ\ react \ react-redux-starter-kit \ src \ routesã®ã¢ãžã¥ãŒã« 'layouts / CoreLayout / CoreLayout'ã解決ã§ããŸãã
@ ./src/routes/index.js 13ïŒ18-58
./src/routes/index.jsã®ãšã©ãŒ
ã¢ãžã¥ãŒã«ãèŠã€ãããŸããïŒãšã©ãŒïŒDïŒ\ react \ react-redux-starter-kit \ src \ routesã®ã¢ãžã¥ãŒã« 'views / HomeView / HomeView'ã解決ã§ããŸãã
@ ./src/routes/index.js 17ïŒ16-50
./src/routes/index.jsã®ãšã©ãŒ
ã¢ãžã¥ãŒã«ãèŠã€ãããŸããïŒãšã©ãŒïŒDïŒ\ react \ react-redux-starter-kit \ src \ routesã®ã¢ãžã¥ãŒã« 'views / HomeView / teachers'ã解決ã§ããŸãã
@ ./src/routes/index.js 21ïŒ16-50
./src/routes/index.jsã®ãšã©ãŒ
ã¢ãžã¥ãŒã«ãèŠã€ãããŸããïŒãšã©ãŒïŒDïŒ\ react \ react-redux-starter-kit \ src \ routesã®ã¢ãžã¥ãŒã« 'views / HomeView / docView'ã解決ã§ããŸãã
@ ./src/routes/index.js 25ïŒ15-48
ããã«ãããã°ã©ã ãå®éã®ãreduxãã§ã¯ãªãééã£ããreduxãã䜿çšãããšããããªãã®åçãèªãã åŸããããžã§ã¯ãããreduxãã©ã«ããŒã®ååãå€æŽããŸããã ãããæ®å¿µãªãããreduxã®ãã©ã«ãã®ååãå€æŽããŠãå®è¡ã§ããŸããã
@gaearon webpack.config.jsã®resolve.rootãå®éã«ã¯srcã®
webpackæ§æãã¡ã€ã«ããresolve.rootãç¡å¹ã«ãããšã以åã¯ããŸãæ©èœããå¯èœæ§ã®ããããã€ãã®æ°ãããšã©ãŒãçºçããŸããã
ã¯ããèªåçã«è§£æ±ºããã絶察ãã¹ã䜿çšã§ããªããªã£ãããã§ãã ãããèŠç¹ã§ãâã©ã¡ãã
resolve.root
ãæ··ä¹±ããªãããã«ããã©ã«ãã®ååãredux
以å€ã®ååã«å€æŽããŸãã../views/HomeView/docView
ã§ã¯ãªãviews/HomeView/docView
ïŒãredux
ãšããååã®ãã©ã«ããŒãšresolve.root
ãªãã·ã§ã³ã®äž¡æ¹ãæã€ããšã¯ã§ããããããæ©èœããããšãæåŸ
ã§ããŸãã
@gaearonããžãã¹ã³ãŒãïŒãã¥ãŒãreduxs-reducersãã³ã³ããŒãã³ããã³ã³ãããŒãªã©ãå«ãïŒããåãæ§æïŒgithubããããŠã³ããŒãïŒã䜿çšããŠãã¹ãŠããŸãæ©èœããå¥ã®ãããžã§ã¯ãã«ã³ããŒããŸããããéåžžã«ããŸãæ©èœããŠãããããžã§ã¯ãã§åããšã©ãŒãçºçããŸããã ããããããžãã¹ã³ãŒããåé€ãããšããããžã§ã¯ãã¯åã³éåžžã«ããŸãæ©èœããŸããã ã ããç§ã¯ãããç§ã®ããžãã¹ã³ãŒãã«ãã£ãŠåŒãèµ·ãããããšãããŠèšãã webpack configã«é¢é£ãããã®ã¯ãªããsrcã«reduxã®ãã©ã«ããŒããããŸããã
ãã®æ£ç¢ºãªãšã©ãŒã衚瀺ãããå ŽåïŒ
rootReducer.js:6 Uncaught TypeError: (0 , _redux.combineReducers) is not a function
Head.js:66 Uncaught TypeError: (0 , _reactRedux.connect) is not a function
ãããããªãã®ããžãã¹ã³ãŒãã«ãã£ãŠåŒãèµ·ããããå¯èœæ§ãããæ¹æ³ã¯ãããŸããã ããã¯ã resolve.root
æ§æãåå ã§çºçãããšã©ãŒã§ãã redux
ã¯ãããã®ãšã¯ã¹ããŒããæäŸããããããã®ãšã©ãŒãçºçããå¯äžã®æ¹æ³ã¯ã redux
ãnpmããã±ãŒãžä»¥å€ã®ãã®ã«è§£æ±ºããå Žåã§ãã
ãã¡ãããä»ã®ãšã©ãŒã®åå ã¯ç°ãªãå ŽåããããŸãã
æãåèã«ãªãã³ã¡ã³ã
@caojinli
ãã®äžã§
npm install
ãå®è¡ãããšãããã¯ã
package.json
ãå£ããŠããããšãæå³ããŸããpackage.json
ã調ã¹ããšãscripts
ã»ã¯ã·ã§ã³ãçªç¶çµäºããŸããJSONããã©ãŒãããããhttp://jsonlint.com/ã§ãšã©ãŒã®æ£ç¢ºãªå ŽæãèŠã€ããŸããã
äžè¶³ããŠãã
}
ã«ã³ãã®åã«è¿œå ããåŸãnpm install
ãå®è¡ããããšãã§ããŸãããnpm start
ãå®è¡ããåŸã次ã®ããã«ãªããŸãããèµ°ã£ã
ãããä¿®æ£ããŸãã
æåŸã«ã
npm start
å床å®è¡ããåŸã次ã®ãšã©ãŒãçºçããŸãããã«ãŒããã©ã«ããåºæºã«ãããã¹ã§ã¢ãžã¥ãŒã«ãã€ã³ããŒãã§ãã
resolve.root
Webpackãªãã·ã§ã³ãæå¹ã«ãªã£ãŠããããšãããããŸããã åé¡ã¯ããããžã§ã¯ãã«redux
ãšãããããredux
ãã¹ãŠã®ã€ã³ããŒãããå®éã®Reduxã§ã¯ãªããã®ãã©ã«ããŒã«è§£æ±ºãããããšã§ããWebpackæ§æãã
resolve.root
ãåé€ãããšãåé¡ãä¿®æ£ãããŸããå°æ¥çã«ã¯ãReduxã®åé¡è¿œè·¡ã·ã¹ãã ã§ã¯ãªããStackOverflowã§ãã®ãããªè³ªåãããããšããå§ãããŸãã Reduxã¯éåžžã«ç¹æ®ãªã©ã€ãã©ãªã§ãããåé¡ã¯ããããããã©ã®ããã«æ©èœããããæ·±ãç解ããã«ãäžç·ã«äœ¿çšãã20ã®ãã¯ãããžãŒãçµã¿åãããŠäœ¿çšââããããšã«é¢é£ããŠããããã§ãã å人çã«ã¯ããã®ãããžã§ã¯ãã®æ§æã§äœãèµ·ãã£ãŠããã®ãããããããªãã®ã§ãReduxã®ãããªã©ã€ãã©ãªãåŠã¶ãšåæã«ãã®äŸã䜿çšããããšã¯ãããŸããã ãã®æ§æã¯å¿ èŠãããŸããã
ãã€ã©ãŒãã¬ãŒããããžã§ã¯ãããæ§æãã³ããŒããŠè²Œãä»ãããšãåžžã«ãã®ãããªãããã°ãé£ããåé¡ãçºçããŸãã ããªããããããäœã£ãŠããã®ã§ã¯ãªããšãã誰ãã®æ§æ決å®ãèŠéããã¡ã§ãã 䜿çšãããã¹ãŠã®ãã¯ãããžãŒãç解ããŠããªãéããå®åãããžã§ã¯ãã䜿çšããªãã§ãã ããã
Reduxã®åŠç¿ãéå§ããã®ã«å®åæã¯å¿ èŠãããŸããã Reduxã®åŠç¿ãéå§ãããã ãã®å Žåã¯ããã®HTMLããŒãžãã³ããŒããŠåŠç¿ãéå§ããŠ