ãããžã§ã¯ãã¯ç©ºã§ãã以åã«åãåã£ãæ å ±ãšç§èªèº«ã®ã¢ã€ãã¢ãçµã¿åããããšã dva @ 2.0ã®èæ ®äºé ã¯æ¬¡ã®ããã«ãªããŸããè°è«ãžããããã
tsã®ãã€ãã£ããµããŒãã¯ã©ãã§ããïŒ
ã¢ãã«ã解é€ãããšãã«ãæªäœ¿çšã®ç¶æ ããŒã¿ãç Žæ£ããããã«ã¬ãã¥ãŒãµãŒãæž¡ãããšããµããŒãããããšãæ€èšããŸããïŒ https://github.com/dvajs/dva/issues/769
dva-cliã®ååãroadhogã«å€æŽããã®ã¯ã©ãã§ããïŒæŠå¿µãæ··ä¹±ããªãããã«ããŠãã ããã
å人çã«ã¯ãtsã®ãã€ãã£ããµããŒãã«åæããŸããããã¬ãŒã ã¯ãŒã¯ã¯ãä»ã®ç¡é¢ä¿ãªãã¯ãããžãŒã¹ã¿ãã¯ãããã€ã³ãã解é€ããçŽç²ã«ä¿ã¡ãããå°ãªãããå¿ èŠããããŸããããšãã°ãã¢ã³ããŠã³ãã¢ãã«ã®ç¶æ ã®åé¡ã¯ãæ¢åã®APIãããã³react-routerèšç»ã¯ãreact-router-dvaãªã©ã®ç¬ç«ããã³ã³ããŒãã³ãã«åå²ããããšã§ããrnã®react-navigation-dvaãäœæããããšãã§ããŸãã
ãšã¯ã¹ãã¬ã¹ããã«ãŠã§ã¢ã¡ã«ããºã ãšåæ§ã«ã dva.use(reselect)
ãªã©ã®ãã©ã°ã€ã³ã®åœ¢åŒã§ããµããŒãã§ããæé©åã¹ããŒã ããããŸããéçãã©ã°ã€ã³ã®ã¿ãçµã¿èŸŒãŸããŠããããã®ä»ã¯åå¥ã«ãµããŒããããŸãã ããããŠäœè³ãå©çšã§ããŸãã
@nihgwuç§ã¯ééã£ãŠããŸãããã€ãŸããantdãšåæ§ã«ãtsã§èšè¿°ããããŠãŒã¶ãŒãå¶éããŸãããããã«ã¯ãã¿ã€ããã¡ã€ã«ãåžžã«æåã§åæããŠå ¬éããå¿ èŠããªããšããå©ç¹ããããŸãã
ãã©ã°ã€ã³ãœãªã¥ãŒã·ã§ã³ã«åæããŸãããããè¡ãããšã¯å¯èœã§ããïŒ
view - dva-core - [æ件]
ãããã®äžã§ãçŸåšã®dvaã«çããéšåã¯æ¬¡ã®ãšããã§ãã
æåŸã®2ã€ã¯ãã©ã°ã€ã³ã§ãã
dvaã¯ããã¥ãŒãšããŒã¿ã®é¢ä¿ãè¡šçŸããããšã«çŠç¹ãåœãŠãã©ã€ãã©ãªãšããŠäœçœ®ä»ããããšãã§ããŸããïŒãã¥ãŒã¯ã©ã®ãããªãã¬ãŒã ã¯ãŒã¯ã§ãããããŒã¿ãœãŒã¹ã¯ã©ã®ãããªæ¹æ³ã§ããã¹ãŠçœ®ãæãå¯èœã«ãªã£ãŠããŸããïŒæ¬¡ã«ã1.0ã§ã¹ã ãŒãºã«ã¢ããã°ã¬ãŒãããããã«ãdvaãdva-coreãšsagaã®ããã©ã«ãã®çµã¿åãããšããŠå®çŸ©ããŸããïŒ
åºã«ãªãã«ãã»ã«åãã€ã³ã¹ã¿ã³ã¹ã¿ã€ãã®ãã£ã¹ãããã¿ã€ãããµããŒãããã®ã«äŸ¿å©ãã©ããããããŸãããïŒ
dispatch({
type: model => model.product.loadAll,
})
æååãèŠããã®ãé¢åã§ãåå空éãæžãã®ãå¿ããã¡ã§ããããããããŠã³ããã³ãããããå Žåã¯ãåæ§ç¯ããã®ã䟿å©ã§ãã
ç¶æ
ã®ãã¹ãŠã®ããŒã¿ã«å¯ŸããŠããã©ã«ãã§äžé£ã®ã¬ãã¥ãŒãµãŒãæäŸã§ãããã©ããã¯ããããŸãã
ã»ãšãã©ã®ã·ããªãªã§ã¯ããã£ãŒã«ãã«å€ãå²ãåœãŠãã ãã®ã¬ãã¥ãŒãµãŒãæåã§äœæããå¿
èŠããããããããã©ã«ãã§æ¢è£œã®åäžãã£ãŒã«ãã»ããã¡ãœãããæäŸã§ããã°ãããã¯éåžžã«è¯ãããšã§ãã
ã¬ãã¥ãŒãµãŒãããªãŒãšããŠå®è£ ã§ããŸããïŒä»ã®ããã«ãns splitã¯ããžãã¯ããã©ããåããããã«åŒ·å¶ãããŸããã¢ãã«ã¯ã¬ãã¥ãŒãµãŒã®ã«ãŒãã«å¯Ÿå¿ããäžã«ã¶ãäžãã£ãŠããã¬ãã¥ãŒãµãŒãå€ãããŸãã
@xufei sagaãã³ã¢ã«ãã¹ãã ãšæããŸãããsagaã®ãªãçŸåšã®
@xufeiç³ãèš³ãããŸããããtsã§æžãããšãåèã«ãã¹ãã ãšæããŸããããå¿ èŠãªããšæããŸããçµå±ãdvaã®ã€ã³ã¿ãŒãã§ãŒã¹ãã·ã³ãã«ã§ãtsã§æžãçŽãããšã¯ã§ããŸããããã¡ã€ã«ãå ¥åããŸãã
@sorrycc sagaã®åé¢äŸã瀺ããŸã
Immutable.jsã¯ãµããŒãã§ããŸããïŒ
Immutable.jsããµããŒãããŸããImmutable.jsã¯ããã©ãŒãã³ã¹ã®æé©åã«ãããŠéèŠãªåœ¹å²ãæãããŸã
Roadhogããã±ãŒãžã³ã°ã¯ââãããã©ãŒãã³ã¹ãé«ãããŸããæé©åã§ãããã©ããã確èªããŠãã ãããå¯èœã§ããã°ãå¯èœãªéãæé©åããŠãã ããããµãŒããŒããããžã§ã¯ãããã«ãããåã«ãä»ã®ã³ã³ãããŒãåæ¢ããå¿ èŠããããŸããããããªããšããµãŒããŒãã¹ã¿ãã¯ããŸãã
Immutable.jsã¯éæšå¥šã§ããlodashæäœãšspreadæäœãçµã¿åãããããšã§ãäžå€ã®å¹æãå®çŸããããšãã§ããŸãããããŠãlodashã¯åºæ¬çã«çµã¿èŸŒãŸããŠããŸãã
å®éãdva 1.xã®éçºçµéšã¯ãImmutable.jsãsplit sagaãnative support tsããµããŒããããã©ãããšåæ§ã«ããã§ã«éåžžã«åªããŠããŸããäžèŠã ãšæãããã¹ãŠéçºè ã®èªå·±æã«å±ããŠããŸããå®éã®éçºå¹çãšçµéšã«åœ±é¿ãäžããŸãã
å人çã«ã¯ãdva2.xã§èæ ®ããå¿ èŠã®ãã4ã€ã®ãã€ã³ãããããŸãã
ãµãŒãã¹ã¬ã€ã€ãŒã®æé©åã¯ãã¢ãã«ã«æœåºããŠçµ±äžãããæ¹æ³ã§ããã±ãŒãžåã§ãããã©ããã«ããããããåºæ¬çã«request
æ°ã«ãããããã©ã«ãã§ãããã¯ãŒã¯äŸå€åŠçãæäŸããŸããããã§åºæ¬çã«å¿
èŠã«ãªããŸããèªåã§request.js
ãæžãã
ããã¯ããã¥ãŒã¬ã€ã€ãŒã®ãšãã§ã¯ãã³ãŒã«ããã¯ã®åé¡ã§ããããžãã¹ããžãã¯ãã¢ãã«ããŒã¿ã«å®å šã«åé¢ããŠãšãã§ã¯ãã§åŠçããã®ã¯éçŸå®çïŒé¢åãããïŒã§ããããããã®é åã§ã¯ããæŽç·Žããããœãªã¥ãŒã·ã§ã³ãå¿ èŠã§ãã
dvaã®åšèŸºã³ãã¥ããã£ã®æ§ç¯ã§ããçŸåšãè¶³å Žã®çš®é¡ã¯è±å¯ã§ãããããã«æ§ç¯ãå¿ èŠã§ãããè§åºŠã®ããã³ãã¥ããã£èªäœã®ãªãœãŒã¹ã¬ãã«ã«å°éããããšãç®æšã®ããã«æããŸãã
ãã«ãããŒã«ãããã©ãŒãã³ã¹ãæ©èœãªã©ïŒçŸåšã¯ã¢ãã¯ïŒã®åŒ·åã¯ãŸã å°ãé¢åã§ã
ç§ã«ãšã£ãŠæãæžå¿µãããã®ã¯ã router
ã®åé¢ã§ãã dva
ã«å«ããå¿
èŠãããã®ã¯redux + redux-saga
ã ãã ãšæããŸãã redux
ã³ãã¥ããã£ã¯ãã§ããéãå°ãªãããšãæå±ããŠããããã1.xããã±ãŒãžreact-router
ãšfetch
ãããã³äžèšã®Immutable
ã¯äžèŠã ãšæããŠããŸããããã¯éçºè
ã®å¥œã¿ã«å±ããŸããã¡ã³ãããšããŠåŸããŠã¯ãããŸãããéçºè
ã®å¥œã¿ã®ããã«ããã©ã°ã€ã³ã®åœ¢ã§ãµããŒãã§ããŸãããµãŒãã¹å±€ã®åé¡ããããŸããå¿
èŠã«å¿ããŠãããªããæžãããšãã§ããplugin
èªåèªèº«ãããã¯ã«å«ããã¹ãã§ã¯ãããŸããdva-core
@nihgwuã«ãŒã¿ãŒãæœåºããç®çã¯äœã§ããïŒ
@nikoguã¯ããããã§ãåå¿è ã¯éæ¹ã«æ®ããã§ããããååãäœã§ãããããããŸãããããããããã¥ã¡ã³ãã詳现ã§ããå Žåããããå¯èœã§ã
ã«ãŒã¿ãŒãåé€ããç®çã¯äœã§ãã
@nikogu
çŸåšãdvaã®é©çšç¯å²ã¯å°ãçãããã¥ãŒãå«ãåå¿ã³ãã¥ããã£ãšåŒ·ãçµã³ã€ããŠãããreact-routerãšã匷ãçµã³ã€ããŠããŸããããããããã䜿çšããåŸãã¯ã€ã€ã¬ã¹ãã«ãããŒãžã¢ããªã±ãŒã·ã§ã³ãªã©ã®ã«ãŒã¿ãŒãå¿ èŠãšããªãå Žæãreact-nativeãªã©ã®react-routerãé©çšã§ããªãå ŽæãããŒããªã©ã®reactãå¿ èŠãšããªãå ŽæãããããšãããããŸããã ãé»åããã³ã¢ãã¬ããã
dvaã¯ãã£ãšã§ãããšæããŸãã
@nikoguã¯ãããŸããŸãªã«ãŒã¿ãŒã䜿çšã§ãããããã«ãŒã¿ãŒããé¢ããŸããããšãã°ãRNã§ã¯react-navigationã䜿çšã§ããreact-navigationã¯webããµããŒãããŸããããã¯ããã©ã°ã€ã³ã§å®å šã«ãµããŒããããããé©åãªã«ã¹ã¿ãã€ãºãå®çŸã§ããŸãã
dvaã¯ãããŒãã®æ¢åã®APIã䜿çšããŠWebãµãŒããŒã®åºæ¬æ©èœãæäŸããexpressãªã©ã®Webéçºãã¬ãŒã ã¯ãŒã¯ã®å®å šãªã»ãããæäŸããã®ã§ã¯ãªããreduxãšsagaã®ã³ãŒããšããžãã¯ãæ°ãã圢åŒã§ç·šæããããšãç解ããŠããŸããããªãã¯ããã£ãã¯ãããŒãæ±ã£ãŠããŸããããããŠããªããéžã¶ãã³ãã¬ãŒããšã³ãžã³ã¯ããã«ãŠã§ã¢ãéããŠã«ã¹ã¿ãã€ãºããããšãã§ããŸã
å®å
šãªãœãªã¥ãŒã·ã§ã³ãå¿
èŠãªå Žådva-ant = dva-core + dva-plugins
ãèªåã§äœ¿çšãã
dvaã®çµã¿åããã¯ãreduxãšsagaã®çµã¿åããã§ããå¿ èŠããããŸããããã¯ãããã2ã€ãããŒã¿ç¶æ ãããŒã®ã³ã¢ã§ããããã®ä»ã¯ããŒã¿ã«åºã¥ããŠæ§ç¯ãããåšèŸºæ©åšãšèŠãªãããšãã§ãããã©ã°ã€ã³ãŸãã¯ä»ã®æ¹æ³ã§ãµããŒãã§ããããã§ãã ExpressãšDjangoãæ¯èŒã§ããŸããããã¯ãå°ãªãããšãšå€ãããšã®å žåçãªéãã§ããã倧ãããŠå®å šãªãã®ã奜ããªäººãããŸãããjsã³ãã¥ããã£ã¯å°ãããªãããçŸãããã®ãå°éããŠããŸã
reduxãçŽæ¥äœ¿çšããå Žåãdvaã䜿çšããäž»ãªçç±ã¯ãdvaãreduxã®ã³ãŒãæ§é ãšããžãã¯ãç°¡çŽ åããçç£å¹çãåäžãããããšãã§ããããã§ããããã¯ãreduxã«åºã¥ãdvaã®ã³ã¢ã§ããããŸãã
ãã¿ããã«ãã£ãšãââããšãdvaã®ã¢ããªã±ãŒã·ã§ã³ã·ããªãªã¯ã©ãã©ãçããªã£ãŠãããŸããããšãã°ãreact-routerã¯RNã§ã¯äœ¿çšã§ããŸããïŒv4ã¯ãã§ã«ãµããŒããããŠããŸãããéåžžã«åºæ¬çã§ãïŒãRNã«ã¯ãã§ãããä»å±ããŠãããä»ã«ã匷åãªãã€ã³ãã£ã³ã°ããããŸãã ãã©ã€ãã©ãªãã¢ããã°ã¬ãŒãã®äŸåé¢ä¿ã®åé¡ãåŒãèµ·ãããŸããããã¯ãŸã react-routerã§ããV4ã¯RNããµããŒãããŸãããdvaã¯ãŸã V2ã§ããdvaãreact-routerãã¢ããã°ã¬ãŒãããã®ãåŸ ã£ãŠãã䜿çšããå¿ èŠããããŸãããã©ã°ã€ã³ã®å Žå-ç¬ç«ããŠã¢ããã°ã¬ãŒãããã°ããã®ãããªåé¡ã¯ãããŸãããNS
äžèšã®dva-coreã®æå³ãããšããã¯ãã¹ã¢ãŒã«ã³ã¢ãdva-coreãšããŠæ±ããã«ãŒã¿ãŒãªã©ã䜿çšããŠãããã«ãªãã£ã¹ãšããã¯ãªãã£ã¹åãã«ã瀟å ã®çµ±åããŒãžã§ã³ãªã©ãããã€ãã®ããã©ã«ãã®çµ±åã¹ããŒã ãéçºããããšã§ãã ãããã³H5ã®å Žåãå°ããªããã°ã©ã ããµãŒããŒåŽã®ã¬ã³ããªã³ã°ãªã©ã
2:00ïŒ
1.å®éã®éçºã§ã¯ãããžãã¹ããžãã¯ãã¢ãã«ã«å®è£
ãããŠããããã¡ã€ã«ã倧ããããŸããä»ã®ãµãŒãã¹ãšãµãŒãã¹ã®é¢ä¿ã¯ã©ã®ãããªãã®ã§ããã ãµãŒãã¹ãŸãã¯ãªã¯ãšã¹ããçµã¿èŸŒãããšãã§ããŸã
2. react-routerãã·ã¹ãã ç¬èªã®ãã©ã°ã€ã³ãªã©ã«å€æŽããŸããç®çã¯ãäŸåé¢ä¿ã解æŸããããšã§ãã
2.0ã¯ãã€éå§ãããŸããïŒ
ãã©ã°å¯èœãªssrãœãªã¥ãŒã·ã§ã³ã¯ãã«ãŒã¿ãŒã®ç®¡çãæœè±¡åããŸãããµãŒããŒåŽã¯ãæåã®ã«ãŒãã£ã³ã°ãªã¯ãšã¹ããåŒãç¶ããå ±ædvaïŒïŒã䜿çšããŠç¶æ ããªãŒãåæåã§ããŸããdvaãã¢ããã°ã¬ãŒããç¶ãããšããµãŒããŒã®ã¬ã³ããªã³ã°ã匱ããªãããã«æããŸããæ°æ©èœã®é©çšã
TypeScriptãšRNãããè¯ããµããŒããåŸãããšãé¡ã£ãŠããŸã
å¥ã®ãã®ãèããŠãããã©ã«ãã®namespace
æäŸããŸã
dvaã䜿çšããéçšã§ã reducer
ããã¬ãã£ãã¯ã¹ãå¿
èŠãšããªãå Žåãåžžã«ãããdvaã®çŸåšã®å®è£
ã¯namespace
æäŸããå¿
èŠãããããã namespace
ã¯ææ¡ããããŸãã default
ïŒãŸãã¯global
ã *
ïŒãæã
ã¯ãããèããmodel
ã®äžã«reducers
æ¥é èŸãªãã§ã
å人çã«ããã€ãã®ç¹ãèããŠãã ããïŒ
redux-saga
ã«äŸåããªããããããã€ãã®æ©èœïŒéåæ/åŸ
æ©ãµããŒããªã©ïŒãç°¡åã«è¿œå ã§ããŸããæè¿ã redux
åºã¥ããŠvuex
ãã¢ãã«åããåç
§ãã€ã³ããäœæããŸããïŒ https ïŒ
ãµãŒããŒããµãŒããŒåŽã§ã¬ã³ããªã³ã°ããããã³ããšã³ããšããã¯ãšã³ããäžç·ã«æžã蟌ãããšãã§ããããã«ããããšããå§ãããŸãã
ã«ãŒããã£ã¬ã¯ããªã®ååãèšå®ã§ããŸããïŒããšãã°ãã³ã³ããã䜿çšããŸã
å®éãã«ã¿ãã°ãæ©èœããšã«åå²ããã¢ãã«ããµãŒãã¹ãã³ã³ãããŒããŸãšããããšæããŸããããããªããšãè€æ°ã®ã«ã¿ãã°ã«ãžã£ã³ããããšãå¿èã®æµããæãªãããŸããåŽé«ãªäžã®ã¿ãã§éããuser.jsãäœã§ããããç¥ãããã«ãç§ã¯ãã§ã«æ¬¡ã®ããã«ååãä»ããŠããŸãïŒuser.jsxãuser.model.jsãuser.service.jsã user / model.jsãservice.jsãcontainer.jsããŸãšããŸã
@zheeengã®ãããªãã£ã¬ã¯ããªç·šæããµããŒããããããã«ãªããdvaã«ã¯ãã£ã¬ã¯ããªç·šæã«é¢ããå¶éããããŸããã
@xufei
@sorrycc
ã¢ãã«ã解é€ãããšãã«ãæªäœ¿çšã®ç¶æ ããŒã¿ãç Žæ£ããããã«ã¬ãã¥ãŒãµãŒãæž¡ãããšããµããŒãããããšãæ€èšããŸããïŒ
æåå¶åŸ¡ã¯é¢åãªã®ã§ãGCã®ã»ãããçŽæ¥å®è£ ããããšããå§ãããŸã
pathToRegexpãã¢ããã°ã¬ãŒãããŠãã ããããã®è§£æã¡ãœãããšã³ã³ãã€ã«ã¡ãœããã¯çŽæ¥äœ¿çšã§ããŸããã
åæã¯æ§æãããåªããŠãããä»ã®ãããžã§ã¯ãããã¯ãããžãŒã¹ã¿ãã¯ãšã®çµåãæžãããŸãã
ãšãã§ã¯ãããžãã¹ã¯éãããŠãmodel-extendã®ã¢ã€ãã¢ã¯ããªãè¯ãã§ã
@nihgwuã¯ãã
@sorrycc dva 2.0ã«ã¯ææ°ã®ãªãªãŒã¹èšç»ããããŸããïŒ
dva-cliãTypeScriptãã€ã©ãŒãã¬ãŒãã®çæãéžæã§ããããšã匷ãæãã§ããŸã
dva-coreã¯ãã§ã«WeChatã¢ãã¬ããã§äœ¿çšã§ããŸã
@yautahã¯ãããè©ŠããŸãããïŒããªãããããè©ŠããåŸãããªãã¯èšç»ãå ±æããããšãã§ããŸãã
dva-coreã¯ãä»ã®ãã©ã°ã€ã³ããã©ã°ã€ã³ã®åœ¢ã§æäŸã§ããããããã±ãŒãžã³ã°ãã«ãŒãã£ã³ã°ã¹ããŒã ãªã©ããŠãŒã¶ãŒãããããéžæããæ¹ããããã©ããã«ããããããreduxããŒã¿ã¹ããªãŒã ã®åã«ãã»ã«åãæäŸããã ãã§ãããšæããŸãã
ã¹ã¿ã€ã©ã¹ããµããŒãããããã«dva-cliããµããŒãããã
ssrããµããŒãããŠããŸããã
HRMã®èšå®æ¹æ³ãAPIã®èšè¿°ã¯æ¯èŒçå°ãªã
æãåèã«ãªãã³ã¡ã³ã
@nihgwuã«ãŒã¿ãŒãæœåºããç®çã¯äœã§ããïŒ