ç§ã¯React.jsãšFluxã§æ§ç¯ããããã£ããã¢ããªã«åãçµãã§combineReducer
é¢æ°ãå¥åŠã«èŠããŸãã äŸãã°ïŒ
messageStore
ã unreadStore
ã threadStore
ãšãã3ã€ã®ã¹ãã¢ããããŸãã ãããŠã NEW_MESSAGE
ãšåŒã°ããã¢ã¯ã·ã§ã³ããããŸãã 3ã€ã®ã¹ãã¢ãã¹ãŠãæ°ããã¡ãã»ãŒãžã§æŽæ°ãããŸãã Reduxã§ã¯ãã¹ãã¢ã¯æ¬¡ã®ããã«combineReducer
ãšçµã¿åããããã¬ãã¥ãŒãµãŒã§ãã
message = (state=[], action) ->
switch action.type
when NEW_MESSAGE
state # new state
unread = (state=[], action) ->
switch action.type
when NEW_MESSAGE
state # new state
thread = (state=[], action) ->
switch action.type
when NEW_MESSAGE
state # new state
combineReducer {message, unread, thread}
ãã®ãããªå Žåãã¬ãã¥ãŒãµãŒãåå²ããŠãç§ã®ç掻ã¯æ¥œã«ãªããªãããã«æããŸãã ãã ããimmutable-jsã§æ§ç¯ããã巚倧ãªã¹ãã¢ã¯ãããã«å¯Ÿããããè¯ããœãªã¥ãŒã·ã§ã³ãããããŸããã ãæ°ã«å ¥ãïŒ
initialState = Immutable.fromJS
message: []
unread: []
thread: []
allStore = (store=initialState, action) ->
switch action.type
when NEW_MESSAGE
initialState
.updateIn ['message'], (messages) -> messages # updated
.updateIn ['urnead'], (urneads) -> unreads # updated
.updateIn ['thread'], (threads) -> threads # updated
ãã®å Žåã combineReducers
ã圹ã«ç«ããªããšæãçç±ã詳ãã説æããŠããã ããŸããïŒ å®éãããŒã¿ããŒã¹ã®ãããªç¶æ
ã®å Žåãåäžã®ã¬ãã¥ãŒãµãŒïŒæ¬¡ã«ãéžæãããã¢ã€ãã ãªã©ãUIç¶æ
çšã®ä»ã®ã¬ãã¥ãŒãµãŒïŒãå¿
èŠã«ãªãããšããããããŸãã
åç §ïŒ
https://github.com/rackt/redux/tree/master/examples/real-world/reducers
https://github.com/rackt/redux/blob/master/examples/async/reducers
ã€ã³ã¹ãã¬ãŒã·ã§ã³ã®ããã«ã
ããªããææããæåã®äŸã¯ç§ã®å ŽåãšäŒŒãŠããã requestType
ã¯äž¡æ¹ã®ã¬ãã¥ãŒãµãŒã§åŠçãããŸãã
https://github.com/rackt/redux/blob/master/examples/real-world/reducers/paginate.js#L28
ã¬ãã¥ãŒãµãŒãåå²ãããšã2ã€ã®ã¬ãã¥ãŒãµãŒãä»ã®ã¬ãã¥ãŒãµãŒããåé¢ãããŠããå Žåã®ä¿å®ã容æã«ãªããŸãã ãããã圌ããåãè¡åããšã£ãŠãããšããããã¯æ¬¡ã®ããšã«ã€ãªãããŸãïŒ
unread
ããmessage
ã«ç§»åããããã¡ãã»ãŒãžãæ°ããã¹ã¬ãããšããŠmessage
ããthread
ææ ŒããããããŸãïŒã ãããã®2ã€ã®åé¡ã«å¯Ÿããé©åãªè§£æ±ºçã¯èŠåœãããŸããã å®éãããã2ã€ã®åé¡ã«ã€ããŠã¯å®å šã«ã¯ããããŸãããããã¬ãŒããªãã®ãããªãã®ã§ãã
ãã®ãããªã¢ã¯ã·ã§ã³ã®å Žåãããã€ãã®ã¬ãã¥ãŒãµãŒïŒãŸãã¯ã¢ããªãæé·ããåŸã®ãã¡ã€ã«ïŒã§ãããç¶æããå¿ èŠããããŸãã çŸåšã®ã³ãŒãããŒã¹ã§ã¯ã5ã€ã®ã¹ãã¢ãåãã¢ã¯ã·ã§ã³ãåŠçããŠããã®ããã§ã«èŠãŠããŸãããç¶æããã®ã¯å°ãé£ããã§ãã
ãããè¯ããæªããã¯ã¢ããªã«ãã£ãŠç°ãªããŸãã ç§ã®çµéšã§ã¯ãåãã¢ã¯ã·ã§ã³ãåŠçããå€ãã®ã¹ãã¢ïŒãŸãã¯Reduxã¬ãã¥ãŒãµãŒïŒããããšã責任ãåæ ãããããŒã ã®ä»ã®ã¡ã³ããŒãšè¡çªããããšãªãæ©èœãã©ã³ãã§äœæ¥ã§ãããããå®éã«ã¯éåžžã«äŸ¿å©ã§ãã ç§ã®çµéšã§ã¯ã1ã€ã®å·šå€§ãªçªç¶å€ç°ããããç¡é¢ä¿ã®çªç¶å€ç°ãåå¥ã«ç¶æããæ¹ãç°¡åã§ãã
ããããããªãã¯æ£ããã§ãããããããŸãããŸãæ©èœããªãå ŽåããããŸãã ãããã¯ãã°ãã°æ¬¡åã®ç¶æ ã¢ãã«ã®çç¶ã§ãããšæããŸãã äŸãã°ã
å Žåã«ãã£ãŠã¯ãããã¬ãã¥ãŒãµãŒãå¥ã®ã¬ãã¥ãŒãµãŒã®ããŒã¿ã«äŸåããããšããããŸãïŒã¡ãã»ãŒãžãæªèªããã¡ãã»ãŒãžã«ç§»åããããã¡ãã»ãŒãžãæ°ããã¹ã¬ãããšããŠã¡ãã»ãŒãžããã¹ã¬ããã«ææ Œãããããããªã©ïŒã
åé¡ã®çç¶ã§ãã ç¶æ
å
ã§ç©ããããã移åããå¿
èŠãããå Žåã¯ãç¶æ
ã®åœ¢ç¶ãããæ£èŠåããå¿
èŠããããããããŸããã 代ããã®{ readMessages, unreadMessages }
ããªããæã€ããšãã§ããŸã{ messagesById, threadsById, messageIdsByThreadIds }
ã ã¡ãã»ãŒãžãèªãã ïŒ ããã§ãããã state.messagesById[id].isRead
åãæ¿ããŸãã ã¹ã¬ããã®ã¡ãã»ãŒãžãèªã¿ããã§ããïŒ state.threadsById[threadId].messageIds
ããã messageIds.map(id => state.messagesById[id])
ãŸãã
ããŒã¿ãæ£èŠåãããŠããå Žåãããé åããå¥ã®é åã«ã¢ã€ãã ãã³ããŒããå¿ èŠã¯ãããŸããã ã»ãšãã©ã®å Žåããã©ã°ãå転ããããIDãè¿œå /åé€/é¢é£ä»ã/é¢é£ä»ã解é€ãããããŸãã
ãããè©ŠããŠã¿ããã§ãã
reduxãè©Šãããã®ãã¢ããŒãžãäœæããŸããã combineReducer
ã¯ç§ã«ããªãã®è€éããããããããšæããŸãã ãŸãããªããžããªå
ã®ãã¹ãŠã®äŸã§combineReducer
ã䜿çšããŠããŸãããããŒã¿ãå«ãJavaScriptãªããžã§ã¯ãã§ã¯ãªããåäžã®äžå€ããŒã¿ãªããžã§ã¯ããã¢ãã«ãšããŠäœ¿çšã§ããå¯èœæ§ã¯ãããŸããïŒ
@jiyinyiyongããªãã話ããŠããè€éãã¯æ¬åœã«combineReducers
䜿çšããªãã§ãã ããã ããã¯ãã ã®ãã«ããŒã§ãã 代ããã«Immutableã䜿çšããåæ§ã®ãã«ããŒã確èªã
ç§ã¯äž»ã«Immutable.jsããµããŒãããããã«ç¬èªã®combineReducers()
ãã«ããŒãäœæããŸããããã«ãŒãã¬ãã¥ãŒãµãŒã®ããã«æ±ãããè¿œå ã®ã¬ãã¥ãŒãµãŒãå¿
èŠã«ãªãå ŽåããããŸãã
https://github.com/jokeyrhyme/wow-healer-bootcamp/blob/master/utils/combineReducers.js
æåã®åŒæ°ã¯ç¶æ ã®åœ¢ç¶ãšäžèŽããæäžäœã®ãµãç¶æ ããæå®ããäžèŽãããµãã¬ãã¥ãŒãµãŒã«æž¡ããŸãã ããã¯ãå ¬åŒããŒãžã§ã³ãšã»ãŒåãã§ãã
ãã ãã0å以äžã®è¿œå åŒæ°ãè¿œå ããããšã¯ãªãã·ã§ã³ã§ããããããã¯ä»ã®ã«ãŒãã¬ãã¥ãŒãµãŒãšåæ§ã«æ±ãããŸãã ãããã®ã¬ãã¥ãŒãµãŒã¯å®å šãªç¶æ ã«æž¡ãããŸãã ããã«ãããæšå¥šããããµããªãã¥ãŒãµãŒãã¿ãŒã³ãããå€ãã®ã¢ã¯ã»ã¹ãå¿ èŠãšããæ¹æ³ã§ã¢ã¯ã·ã§ã³ããã£ã¹ãããã§ããŸãã
ãããæªçšããã®ã¯æããã«è¯ãèãã§ã¯ãããŸããããè€æ°ã®ãµãã¬ãã¥ãŒãµãŒãšè€æ°ã®ã«ãŒãã¬ãã¥ãŒãµãŒããããšäŸ¿å©ãªå¥åŠãªã±ãŒã¹ãèŠã€ããŸããã
ãããããè€æ°ã®ã«ãŒãã¬ãã¥ãŒãµãŒãè¿œå ãã代ããã«ãäžéã®ã¹ãããã§ã¯ãè¿œå ã®åŒæ°ã䜿çšããŠãããåºãã¢ã¯ã»ã¹ïŒãŸã åèšã¢ã¯ã»ã¹ããå°ãªãïŒãå¿ èŠãšãããµãã¬ãã¥ãŒãµãŒãå®çŸ©ããããšãã§ããŸãã äŸãã°ïŒ
function a (state, action) { /* only sees within a */ return state; }
function b (state, action) { /* only sees within b */ return state; }
function c (state, action) { /* only sees within c */ return state; }
function ab (state, action) { /* partial state containing a and b */ return state; }
function bc (state, action) { /* partial state containing b and c */ return state; }
let rootReducer = combineReducers(
{ a, b, c },
[ 'a', 'b', ab ],
[ 'b', 'c', bc ]
);
éšåã¬ãã¥ãŒãµãŒãšè¿œå ã®ã«ãŒãã¬ãã¥ãŒãµãŒã®PRãæåºãã䟡å€ã¯ãããŸããïŒ ããã¯æãããèãã§ããããããšãä»ã®ååãªäººã ã«åœ¹ç«ã€å¯èœæ§ããããã®ã§ããïŒ
ããã²ã³ãšãã¬ããããã®åé¡ã«ã©ã®ããã«å¯ŸåŠããŠããããç¥ããããšæããŸãã JavaScriptã¯ããã€ãã®ããã°ã©ã å³ãæ··åšããŠãããããŸããŸãªæ¹æ³ã§ç§ãã¡ãå°ããŸãã FRPãšåæ¹åã®ããŒã¿ãããŒã®ã©ã¡ããæ£ããã®ãæ··ä¹±ããŠããŸãã
ããã¯ç§ã«ãšã£ãŠãæ··ä¹±ã®ãã€ã³ãã§ããããšãããããŸããã ããã«ç§ã®ãŠãŒã¹ã±ãŒã¹/ãœãªã¥ãŒã·ã§ã³ãæçš¿ããã ãã§ãã
3ã€ã®ç°ãªããªãœãŒã¹ã¿ã€ãïŒã¯ã©ã€ã¢ã³ãããããžã§ã¯ãããžã§ãïŒã®é
åãåŠçãã3ã€ã®ãµããªãã¥ãŒãµãŒããããŸãã ã¯ã©ã€ã¢ã³ãïŒ REMOVE_CLIENT
ïŒãåé€ãããšãé¢é£ãããã¹ãŠã®ãããžã§ã¯ããšãžã§ããåé€ããå¿
èŠããããŸãã ãžã§ãã¯ãããžã§ã¯ããéããŠã¯ã©ã€ã¢ã³ãã«é¢é£ä»ããããŠããããããžã§ããªãã¥ãŒãµãŒã¯ãçµåããžãã¯ãå®è¡ããããã«ãããžã§ã¯ãã«ã¢ã¯ã»ã¹ã§ããå¿
èŠããããŸãã ãžã§ããªãã¥ãŒãµãŒã¯ãåé€ããã¯ã©ã€ã¢ã³ãã«å±ãããã¹ãŠã®ãããžã§ã¯ãIDã®ãªã¹ããååŸããŠãããäžèŽãããžã§ããã¹ãã¢ããåé€ããå¿
èŠããããŸãã
ç§ã¯æ¬¡ã®ããã«ãŠã§ã¢ã§ãã®åé¡ãåé¿ããŸããïŒ
export default store => next => action => {
next({ ...action, getState: store.getState });
}
ãã®ããããã¹ãŠã®ã¢ã¯ã·ã§ã³ãaction.getState()
ä»ããŠã«ãŒãã¹ãã¢ã«ã¢ã¯ã»ã¹ã§ããŸãã
@ rhys-vdwããããšãããããŸãïŒ æ¬åœã«åœ¹ç«ã€ããã«ãŠã§ã¢:)
@ rhys-vdwãããããããšãâçŽ æŽããã解決çã®ããã§ãã ãšããžã±ãŒã¹/åç
§æŽåæ§ãã©ã®ããã«åŠçããŸãããããšãã°ããšã³ãã£ãã£ã2ã€ïŒãŸãã¯ãã以äžïŒã®ä»ã®ãšã³ãã£ãã£ã«ãã£ãŠå
±æãããŠããå Žåããåé€äžã«ååšããªãã¬ã³ãŒããæããŠããå Žåãªã©ã§ãã ããã«ã€ããŠã®ããªãã®èããèãããšã«ç±å¿ã§ãã
@gaearon Reduxã«ã¯ãæ£èŠåããããšã³ãã£ãã£ã®ãã®çš®ã®åç
§æŽåæ§ã®åé¡ã解決ããæ¹æ³ãææžåãããŠããŸããïŒ
ç¹å®ã®æ¹æ³ã¯ãããŸããã ã¹ããŒããå®çŸ©ãããã®ã¹ããŒãã«åºã¥ããŠã¬ãã¥ãŒãµãŒãçæããããšã§ããããèªååã§ãããšæããŸãã ããããã°ãç©ãåé€ããããšãã«ããŽãããéããæ¹æ³ããç¥ã£ãŠãããã§ãããã ãã ããããã¯ãã¹ãŠéåžžã«æäœæ¥ã§æ³¢æã£ãŠããŠãå®è£
äœæ¥ãå¿
èŠã§ã:-)ã å人çã«ã¯ãåé€ãå®éã®ã¯ãªãŒã³ã¢ãããæ£åœåããã»ã©é »ç¹ã«è¡ããããšã¯æããŸããã ç§ã¯éåžžãã¢ãã«ã®status
ãã£ãŒã«ããå転ããåé€ãããã¢ã€ãã ãéžæãããšãã«è¡šç€ºãããªãããã«ããŸãã ãŸãã¯ããã¡ãããäžè¬çãªæäœã§ãªãå Žåã¯ãåé€æã«æŽæ°ã§ããŸãã
@gaearonè¶
é«éè¿ä¿¡ã«ä¹Ÿæ¯ã ããâŠMongoã®ãããªããã¥ã¡ã³ãããŒã¹ã®DBã§åç
§ã䜿çšããå Žåãåç
§æŽåæ§ãåŠçããã®ãšåãåªåãããŠãããšæããŸãã ç§ã¯æŒã£ä»»æã®ãã¿å®äœãªãã§çŽç²ãªç¶æ
ãæã£ãŠããããããã®äŸ¡å€ããããšæããŸãã ç¹ã«å·ã«CRUDãªãã¬ãŒã·ã§ã³ãããããããå Žåããããã®ãŽãŒã¹ããšã³ããªãããªããã€ãŸããããå¯èœæ§ããããã©ããã¯ããããŸããã
ãã ãã Redux
ãæ£èŠåããããšã³ãã£ãã£ãšåã蟌ãŸãããšã³ãã£ãã£ã®äž¡æ¹ããµããŒãããŠããã°ãšãŒã¹ã«ãªããšæããŸãã ãããŠãç®çã«åã£ãæŠç¥ãéžã¶ããšãã§ããŸãã ããããåã蟌ã¿ãšã³ãã£ãã£ã®å ŽåãReduxã®ããã¥ã¡ã³ãã«ãããšã¢ã³ããã¿ãŒã³ã§ããnested reducers
ã䜿çšããå¿
èŠããããšæããŸãã
ã¬ãã¥ãŒãµãŒã§ã¹ãã¢ã®æ®ãã®ç¶æ
ã«ã¢ã¯ã»ã¹ããã®ã¯é£ããããšãããããŸããã ãã¹ããããcombineReducersã䜿çšããã®ãéåžžã«é£ããå ŽåããããŸãã .parent()
ã.root()
ãªã©ãå·ã®æ®ãã®éšåã«ã¢ã¯ã»ã¹ããæ¹æ³ããããšäŸ¿å©ã§ãã
ã¬ãã¥ãŒãµãŒå
ã®ä»ã®ã¬ãã¥ãŒãµãŒã®ç¶æ
ã«ã¢ã¯ã»ã¹ããããšã¯ãã»ãšãã©ã®å Žåã¢ã³ããã¿ãŒã³ã§ãã
éåžžã次ã®æ¹æ³ã§è§£æ±ºã§ããŸãã
ããããšãïŒ ç§ã¯ããã«åæããŸãã ã«ãŒãç¶æ ãã¬ãã¥ãŒãµãŒã«æž¡ãããšããåŸãããè€éã«ãªã£ãããšãããããŸãã:-)
ãããã«ãŒãç¶æ ãæž¡ãéã®åé¡ã¯ãã¬ãã¥ãŒãµãŒãäºãã®ç¶æ 圢ç¶ã«çµåãããããã«ãªããç¶æ æ§é ã®ãªãã¡ã¯ã¿ãªã³ã°ãå€æŽãè€éã«ãªãããšã§ãã
ããŠãç§ã¯æ£èŠåãããç¶æ ãæã€ããšã®å©ç¹ãã¯ã£ãããšèŠãŠãç§ã®ç¶æ ã®reduxéšåãDBã®ããã«æ±ããŸãã
@gaearon ïŒåé€ã®ãã©ã°ãç«ãŠããšã³ãã£ãã£ïŒãŸãã¯@ rhys-vdwã®ã¢ãããŒãïŒåç §ã解決ããŠé¢é£ããåç §ãåé€ããïŒã®æ¹ãåªããŠãããã©ããã¯ãŸã èããŠããŸãã
ã¢ã€ãã¢/çŸå®äžçã®çµéšã¯ãããŸããïŒ
reduxãelmã«äŒŒãŠããŠãç¶æ ãæ£èŠåãããŠããªãå Žåã¯ãã¬ãã¥ãŒãµãŒãç¶æ ã®åœ¢ç¶ããåãé¢ãããšãéèŠã§ãã ãã ããç¶æ ã¯æ£èŠåãããŠãããããã¬ãã¥ãŒãµãŒã¯ã¢ããªã®ç¶æ ã®ä»ã®éšåã«ã¢ã¯ã»ã¹ããå¿ èŠãããããã§ãã
ã¬ãã¥ãŒãµãŒã¯ã¢ã¯ã·ã§ã³ã«äŸåãããããã¬ãã¥ãŒãµãŒã¯ãã§ã«ã¢ããªã±ãŒã·ã§ã³ã«æšç§»çã«çµåãããŠããŸãã å¥ã®reduxã¢ããªã±ãŒã·ã§ã³ã§ã¬ãã¥ãŒãµãŒãç°¡åã«åå©çšããããšã¯ã§ããŸããã
ç¶æ ã¢ã¯ã»ã¹ãã¢ã¯ã·ã§ã³ã«ããã·ã¥ããããã«ãŠã§ã¢ã䜿çšããããšã§åé¡ãåé¿ããããšã¯ããªãã¥ãŒãµãŒãã«ãŒãç¶æ ã«çŽæ¥ã¢ã¯ã»ã¹ã§ããããã«ãããã¯ããã«éã圢åŒã®çµåã®ããã«èŠããŸãã ããã§ãéåžžã¯ãããå¿ èŠãšããªãã¢ã¯ã·ã§ã³ãç¶æ ã®åœ¢ç¶ã«çµåãããã¬ãã¥ãŒãµãŒãããå€ãã®ã¢ã¯ã·ã§ã³ããããå€æŽããå Žæãå€ããªããŸãã
ç¶æ ããã¥ãŒã«æž¡ããŠã¢ã¯ã·ã§ã³ã«å€æããæ¹ããç¶æ ã®åœ¢ç¶ã®å€åãããé©åã«åé¢ã§ããŸãããæ©èœãè¿œå ããããšãã«è¿œå ã®ç¶æ ãå¿ èŠãªå Žåã¯ãå€ãã®ã¢ã¯ã·ã§ã³ãæŽæ°ããå¿ èŠããããŸãã
ã¬ãã¥ãŒãµãŒãã«ãŒãç¶æ ã«ã¢ã¯ã»ã¹ã§ããããã«ããIMHOã¯ãçŸåšã®åé¿çãããå šäœçãªçµåãå°ãªããªããŸãã
@kurtharriger ïŒäžè¬çãªæšå¥šãã¿ãŒã³ã¯ãã¡ã€ã³ããšã«Reduxç¶æ
ãæ§é åããããšã§ããã combineReducers
ã䜿çšããŠåãã¡ã€ã³ãåå¥ã«ç®¡çããããšããå§ãããŸãã ç¶æ
å
šäœãç¹å®ã®ãµãã¬ãã¥ãŒãµãŒé¢æ°ã«æž¡ããªã©ãããŸããŸãªæ¹æ³ã§ç®¡çããç¬èªã®ãããã¬ãã«ã¬ãã¥ãŒãµãŒãäœæããããšã¯å®å
šã«å¯èœã§ãã æçµçã«ãå®éã«ã¯_one _ã¬ãã¥ãŒãµãŒé¢æ°ãããªããå
éšã§ã©ã®ããã«å解ãããã¯å®å
šã«ããªã次第ã§ãã combineReducers
ã¯ãäžè¬çãªãŠãŒã¹ã±ãŒã¹ã«åœ¹ç«ã€ãŠãŒãã£ãªãã£ã§ãã
ããžãã¹ããžãã¯ã®åå²ã«é¢ããReduxFAQã®åçã«ãããã®ãããã¯ã«é¢ããããã€ãã®è¯ãè°è«ããããŸãã
ã¯ããå¥ã®ãªãã·ã§ã³ã¯ã1ã€ã®å·šå€§ãªé¢æ°ã§åäžã®ã¬ãã¥ãŒãµãŒã䜿çšããããçµã¿èŸŒã¿ã®é¢æ°ã䜿çšããã®ã§ã¯ãªããç¬èªã®combineReduceré¢æ°ãäœæããããšã§ãã
ã«ãŒãç¶æ
åŒæ°ãè¿œå ããcombineReducersã¡ãœãããçµã¿èŸŒãŸããŠãããšäŸ¿å©ã§ããããã®æ©èœãè¿œå ããããšããPRã¯ãã¢ã³ããã¿ãŒã³ãšããŠã¯ããŒãºãããŠããŸãã ç§ã¯ãIMHOãææ¡ãã代æ¿æ¡ãã¯ããã«å
šäœçãªçµåããããããšããç¹ã䞻匵ãããã£ãã ãã§ãããããããããã¯ã¢ã³ããã¿ãŒã³ãšèŠãªãããã¹ãã§ã¯ãããŸããã ãŸããã«ãŒãç¶æ
ãè¿œå ã®åŒæ°ãšããŠè¿œå ãããå Žåã匷å¶çã«äœ¿çšããã®ãšã¯ç°ãªããã«ãããªã³ã°ã¯ãªããã€ã³ã®ãŸãŸã§ãã
ãã®çµåãæ瀺çã«ããå¿ èŠããããŸãã æåã§è¡ããšæ瀺çã§ãããæåéãNè¡ã®ã³ãŒãã§ããNã¯ã¬ãã¥ãŒãµãŒã®æ°ã§ãã CombineReducersã䜿çšããããã®èŠªã¬ãã¥ãŒãµãŒãæåã§èšè¿°ããŠãã ããã
ç§ã¯redux / reactã«äžæ £ãã§ãããè¬èã«ãããå°ããŸãïŒãäºãã®ç¶æ ã«ã¢ã¯ã»ã¹ããæ§æãããã¬ãã¥ãŒãµãŒãç¶æ 圢ç¶ã®ç°ãªãé åéã®çµåãè¿œå ããããã«ã¢ã³ããã¿ãŒã³ã§ããå Žåããã®çµåã¯ãã§ã«mapStateToPropsïŒã§è¡ãããŠãããšäž»åŒµããŸãïŒã®connectïŒïŒããã®é¢æ°ã¯ã«ãŒãç¶æ ãæäŸããã³ã³ããŒãã³ãã¯ã©ãããã§ãã©ãããã§ããã«ããŠå°éå ·ãååŸããããã§ãã
ç¶æ ãµãããªãŒãã«ãã»ã«åããå Žåãã³ã³ããŒãã³ãã¯ããããã®ãµãããªãŒãé衚瀺ã«ããã¢ã¯ã»ãµãŒãä»ããŠç¶æ ã«ã¢ã¯ã»ã¹ããå¿ èŠããããŸããããã«ããããããã®ã¹ã³ãŒãã®å éšã®ç¶æ 圢ç¶ããªãã¡ã¯ã¿ãªã³ã°ããã«ç®¡çã§ããŸãã
reduxãåŠã¶ã«ã€ããŠãã¢ããªã®é·æçãªåé¡ã§ãããšç§ãæ³åããŠããããšã«èŠåŽããŠããŸããããã¯ãã¢ããªå šäœã®ç¶æ ã®åœ¢ç¶ããã¬ãã¥ãŒãµãŒã§ã¯ãªãmapStateToPropsã«ãã£ãŠç·å¯ã«çµåãããŠããããšã§ããããšãã°ãã³ã¡ã³ããµã€ãããŒãç¥ãå¿ èŠããããŸãã authãŠãŒã¶ãŒã®ååïŒããšãã°ãã³ã¡ã³ããªãã¥ãŒãµãŒãšauthã¬ãã¥ãŒãµãŒã«ãã£ãŠããããçž®å°ãããŸãïŒãmapStateToPropsã§ãããã®çš®ã®ã«ãã»ã«åãè¡ãã¢ã¯ã»ãµãŒã¡ãœããã§ãã¹ãŠã®ç¶æ ã¢ã¯ã»ã¹ãã©ããããããšãè©Šã¿ãŠããŸãããééã£ãŠããããã«æããŸããæšã
@jwhiting ïŒããã¯ããã»ã¬ã¯ã¿ãŒé¢æ°ãã䜿çšããŠãç¹ã«mapStateToProps
ã§ãç¶æ
ããå¿
èŠãªããŒã¿ãæœåºããããã€ãã®ç®çã®1ã€ã§ãã state.some.nested.field
ãã©ãã«ããããå®éã«ç¥ãå¿
èŠãããå Žæãæå°éã«ãªãããã«ã圢ç¶ã®ç¶æ
ãé衚瀺ã«ããããšãã§ããŸãã ãŸã ã芧ã«ãªã£ãŠããªãå Žåã¯ã Computing DerivedDataã»ã¯ã·ã§ã³ãã芧ãã ããã
ããã ãŸããããŒã¿éãå°ãªãå Žåã¯åéžæã䜿çšããå¿
èŠã¯ãããŸããããïŒææžãã®ïŒã»ã¬ã¯ã¿ãŒã䜿çšããŸãã ãã®ã¢ãããŒãã®shopping-cart
äŸã確èªããŠãã ããã
@markerikson @gaearonããã¯çã«
ãã¹ãŠã®ã³ãŒããåäžã®ã¬ãã¥ãŒãµãŒã«ä¿æããããšã¯ã
æžå¿µã ã¬ãã¥ãŒãµãŒãã«ãŒãã«ãã£ãŠåŒã³åºãããå Žåã¯ãæåã§åŒã³åºãããšãã§ããŸã
ç§ãããªãã®ææ¡ã ãšæãããã«ãã«ãŒãç¶æ
ãæ瀺çã«æž¡ããŸããã
芪ã¬ãã¥ãŒãµãŒéå±€ã«ã¯ãããããªããã³ã°ããå¿
èŠãããcombineReducersãå«ãŸããŠããŸã
ã¢ãŠãã ã ãããããªããããããªããã³ã°ããå¿
èŠããªãããã«ãããããã£ãšå¯èœã«ããŸãããïŒ
åŸã§åºãããããã»ãšãã©ã®äººãããããããã«ãµã³ã¯ã«é ŒããŸããïŒ
8ïŒ27 PMãžã§ã·ã¥ã»ãã¯ã€ãã£ã³ã°ã®åæã2016幎4æ16æ¥ã«ã¯[email protected]
æžããŸããïŒ
@markerikson https://github.com/markerikson @gaearon
https://github.com/gaearonããã¯çã«ããªã£ãŠã
ããããšãããããŸããã ãã以å€ã®å Žåã¯ãmapStateToPropsã§ã»ã¬ã¯ã¿ãŒã䜿çšããŸã
ã³ã³ããŒãã³ãã®äž»ãªé¢å¿äºïŒãŸãã¯ãããããã¹ãŠã®å·ã®ã¢ã¯ã»ã¹ïŒã¯ã·ãŒã«ãããŸã
ç°è³ªãªç¶æ ã®åœ¢ç¶ã®å€åããã®ã³ã³ããŒãã³ãã æ¹æ³ãèŠã€ããã
ãã ããç§ã®ãããžã§ã¯ãã§ç¶æ ã®ã«ãã»ã«åãããå³å¯ã«å®æœããããã«ã
ã³ãŒãã®èŠåŸã ãããããå®ããã®ã§ã¯ãªããæè¿ããŸã
ããã«ææ¡ãâ
ããªããèšåãããã®ã§ããªãã¯ãããåãåã£ãŠããŸãã
ãã®ã¡ãŒã«ã«çŽæ¥è¿ä¿¡ããããGitHubã§è¡šç€ºããŠãã ãã
https://github.com/reactjs/redux/issues/601#issuecomment -210940305
@kurtharriger ïŒã¬ãã¥ãŒãµãŒããžãã¯ã®æåŸã®ãããããã¹ãŠ1ã€ã®é¢æ°ã«ä¿æããããšã¯æªãèãã§ãããäœæ¥ãäœããã®æ¹æ³ã§ãµãé¢æ°ã«å§ä»»ããå¿
èŠãããããšã«åæããŸãã ãã ãããããè¡ãæ¹æ³ã«ã€ããŠã¯èª°ããç°ãªãã¢ã€ãã¢ãæã¡ãç¬èªã®ã¢ããªã±ãŒã·ã§ã³ã«å¯Ÿããç°ãªãããŒãºããããŸãã Reduxã¯ãäžè¬çãªãŠãŒã¹ã±ãŒã¹ã®çµã¿èŸŒã¿ãŠãŒãã£ãªãã£ãšããŠcombineReducers
ãæäŸããã ãã§ãã çŸåšååšãããŠãŒãã£ãªãã£ã䜿çšããããªãå Žåã¯ã䜿çšããå¿
èŠã¯ãããŸããããã¹ãŠãæåã§äœæããå Žåã§ããç¬èªã®combineReducers
ã®ããªãšãŒã·ã§ã³ãäœæããå Žåã§ããã¬ãã¥ãŒãµãŒãç¬èªã®æ¹æ³ã§æ§æããããšã¯å€§æè¿ã§ãã
ãã¿ãŒã³ãšé¢å¿ã®åé¢ã«ã€ããŠè©±ããŠããã®ã§ãç§ã¯å®éã«é¢é£ããäœãã«ééããŠããŸããã代ããã«ã¢ã¯ã·ã§ã³ããããŸãã
ã€ãŸãããã¡ãã¡ã§èŠãããajax shouldFetchãã¿ãŒã³ã¯ãç¶æ ã®åœ¢ãšå¯æ¥ã«çµã³ã€ããŠããããã§ãã ããšãã°ãããã§ã¯ã ãã®äŸã§ã¯ãã¬ãã¥ãŒãµãŒãåå©çšããŠããç¶æ ã®ã«ãŒãã«ãšã³ãã£ãã£ãªããžã§ã¯ãããªãå Žåã¯ã©ããªããŸããïŒ ãã®å Žåããã®ã¢ã¯ã·ã§ã³ã¯å€±æããŸãã ããã§ã®æšå¥šäºé ã¯äœã§ããïŒ ã±ãŒã¹åºæã®ã¢ã¯ã·ã§ã³ãè¿œå ããå¿ èŠããããŸããïŒ ãŸãã¯ã»ã¬ã¯ã¿ãŒãåãå ¥ããã¢ã¯ã·ã§ã³ïŒ
@shadowiiã¢ã¯ã·ã§ã³ã¯ãªãšãŒã¿ãŒã«ã»ã¬ã¯ã¿ãŒãã€ã³ããŒããããããšã¯ç§ã«ã¯åé¡ãªãããã§ãã ã»ã¬ã¯ã¿ãŒãšã¬ãã¥ãŒãµãŒãåãå Žæã«é 眮ããŠãç¶æ ã®åœ¢ç¶ã«é¢ããç¥èããããã®ãã¡ã€ã«ã«ããŒã«ã©ã€ãºãããããã«ããŸãã
ç°ãªãã¬ãã¥ãŒãµãŒãåãã¢ã¯ã·ã§ã³ã¿ã€ããåŠçããããšã®åé¡ã¯äœã§ããïŒ
ããšãã°ã account
ãšauth
ã¬ãã¥ãŒãµãŒãããå Žåãã©ã¡ããLOGIN_SUCCESS
ã¢ã¯ã·ã§ã³ã¿ã€ãïŒãã€ããŒãã«èªèšŒããŒã¯ã³ãšã¢ã«ãŠã³ãããŒã¿ãå«ãïŒãåŠçããŸãã 1ã€ã¯ã管çããç¶æ
ã®ã¹ã©ã€ã¹ã®ã¿ãæŽæ°ããŸãã ã¢ã¯ã·ã§ã³ãå·ã®ããŸããŸãªéšåã«åœ±é¿ãäžãããšãã«ããã®ã¢ãããŒããäœåºŠã䜿çšããŠããããšã«æ°ã¥ããŸããã
ç°ãªãã¬ãã¥ãŒãµãŒãåãã¢ã¯ã·ã§ã³ã¿ã€ããåŠçããããšã®åé¡ã¯äœã§ããïŒ
åé¡ã¯ãããŸãããããã¯éåžžã«äžè¬çã§äŸ¿å©ãªãã¿ãŒã³ã§ãã å®éãããã¯_reason_ã¢ã¯ã·ã§ã³ãååšããããšã§ããã¢ã¯ã·ã§ã³ãã¬ãã¥ãŒãµãŒ1ïŒ1ã«ããããããŠããå Žåãã¢ã¯ã·ã§ã³ãæã€ããšã«ã¯ã»ãšãã©æå³ããããŸããã
@ rhys-vdwæçš¿ããããã«ãŠã§ã¢ã䜿ã£ãŠã¿ãŸããã
customMiddleare.js
const customMiddleware = store => next => action => {
next({ ...action, getState: store.getState });
};
ãããŠç§ã®åºã®äœæã§ç§ã¯æã£ãŠããŸã
import customMiddleware from './customMiddleware';
var store = createStore(
rootReducer,
initialState,
applyMiddleware(
reduxPromise,
thunkMiddleware,
loggerMiddleware,
customMiddleware
)
);
return store;
次ã®ãšã©ãŒãçºçããŸãïŒ
applyMiddleware.jsïŒee15ïŒ49 Uncaught TypeErrorïŒããã«ãŠã§ã¢ã¯é¢æ°ã§ã¯ãããŸããïŒâŠïŒ
ïŒå¿åé¢æ°ïŒ@ applyMiddleware.jsïŒee15ïŒ49
ïŒå¿åé¢æ°ïŒ@ applyMiddleware.jsïŒee15ïŒ48
createStore @ createStore.jsïŒfe4cïŒ65
configureStore @ configureStore.jsïŒ ffdeïŒ45
ïŒå¿åé¢æ°ïŒ@ index.jsxïŒfdd7ïŒ25
ïŒå¿åé¢æ°ïŒ@ bundle.jsïŒ1639
webpack_require @ bundle.jsïŒ556
fn @ bundle.jsïŒ87ïŒç¡åé¢æ°ïŒ@ bundle.jsïŒ588
webpack_require @ bundle.jsïŒ556
ïŒå¿åé¢æ°ïŒ@ bundle.jsïŒ579
ïŒå¿åé¢æ°ïŒ@ bundle.jsïŒ582
@ mars76 ïŒäœããæ£ããã€ã³ããŒãããŠããªãå¯èœæ§ããããŸãã ãããæ¬åœã«customMiddleware.js
å
容å
šäœã§ããå Žåã¯ã_anything_ããšã¯ã¹ããŒãããŠããŸããã äžè¬ã«ã4ã€ã®ããã«ãŠã§ã¢ãapplyMiddleware
ã«æž¡ããŸããããããããã®ãã¡ã®1ã€ã¯æå¹ãªåç
§ã§ã¯ãããŸããã æ»ã£ãŠããããããã¹ãŠåé€ããäžåºŠã«1ã€ãã€å床远å ããã©ããç¡å¹ã§ãããã確èªããŠããã®çç±ãç解ããŸãã ã€ã³ããŒãã¹ããŒãã¡ã³ããšãšã¯ã¹ããŒãã¹ããŒãã¡ã³ãã確èªããããåæåã®æ¹æ³ãå確èªãããããŸãã
ããã«ã¡ã¯ã
ããããšã@markerikson
æ§æã次ã®ããã«å€æããŸããããä»ã¯åé¡ãããŸããã
customMiddleware.js
export function customMiddleware(store) {
return function (next) {
return function (action) {
next(Object.assign({}, action, { getState: store.getState }));
};
};
}
console.log(customMiddleware);
ãã ããã¢ã¯ã·ã§ã³ã¯ãªãšãŒã¿ãŒèªäœïŒã¬ãã¥ãŒãµãŒã§ã¯ãªãïŒã§ã¹ãã¢ã«ã¢ã¯ã»ã¹ããããšããŠããŸãã éåæåŒã³åºããè¡ãå¿ èŠããããããŸããŸãªã¬ãã¥ãŒãµãŒã«ãã£ãŠç®¡çãããŠããã¹ãã¢ã®ç¶æ ã®ããŸããŸãªéšåãæž¡ãå¿ èŠããããŸãã
ãããç§ãããŠããããšã§ãã ãããæ£ããã¢ãããŒããã©ããããããªãã
ããŒã¿ã䜿çšããŠã¢ã¯ã·ã§ã³ããã£ã¹ãããããã¬ãã¥ãŒãµãŒå ã§ç¶æ å šäœã«ã¢ã¯ã»ã¹ã§ããããã«ãªããŸãããå¿ èŠãªéšåãæœåºããŠãªããžã§ã¯ããäœæãããã®ããŒã¿ã䜿çšããŠå¥ã®ã¢ã¯ã·ã§ã³ããã£ã¹ãããããŸããããã¯ãã¢ã¯ã·ã§ã³ã¯ãªãšãŒã¿ãŒã§å©çšã§ããŸãããã®ããŒã¿ã䜿çšããŠAsynåŒã³åºããè¡ã£ãŠããŸãã
ç§ã®æ倧ã®æžå¿µã¯ãã¬ãã¥ãŒãµãŒãã¢ã¯ã·ã§ã³ã¯ãªãšãŒã¿ãŒã¡ãœãããåŒã³åºããŠããããšã§ãã
ã³ã¡ã³ãã«æè¬ããŸãã
ããããšã
@ mars76 ïŒç¹°ãè¿ãã«ãªããŸãããReducerå ãããã£ã¹ãããããããšããªãã§ãã ããã
ã¢ã¯ã·ã§ã³ã¯ãªãšãŒã¿ãŒå ã®ã¹ãã¢ã«ã¢ã¯ã»ã¹ããã«ã¯ã redux-thunkããã«ãŠã§ã¢ã䜿çšã§ããŸãã ãŸããã¬ãã¥ãŒãµãŒéã§ã®ããŒã¿å ±æã«é¢ããFAQã®è³ªåããäžè¬çãªãµã³ã¯ã®äœ¿çšäŸãããã€ã
ã©ããããããšã@markeriksonã
ç§ã®æªããredux-thunkã®getStateïŒïŒã«ã€ããŠæ°ã¥ããªãã£ãã ããã¯ç§ã®ä»äºãã¯ããã«ç°¡åã«ããç§ã®ã¬ãã¥ãŒãµãŒãçŽç²ãªãŸãŸã«ããŸãã
@gaearonã¯ãã¢ã¯ã·ã§ã³ã¯ãªãšãŒã¿ãŒã«ã»ã¬ã¯ã¿ãŒãã€ã³ããŒããèšã£ããšããã»ã¬ã¯ã¿ãŒãžã®ãã³ããªãã®ããã«ç¶æ å šäœãã¢ã¯ã·ã§ã³ã¯ãªãšãŒã¿ãŒã«æž¡ãããããšã念é ã«çœ®ããŠããŸãããããããšãäœãã足ããŸãããïŒ
@tacomanator ïŒ
ã»ãšãã©ã®å Žåãã¢ã¯ã·ã§ã³ã¯ãªãšãŒã¿ãŒã§ã»ã¬ã¯ã¿ãŒã䜿çšããŠããå Žåã¯ããµã³ã¯å
ã§ã»ã¬ã¯ã¿ãŒã䜿çšããŠããŸãã ãµã³ã¯ã¯getState
ã«ã¢ã¯ã»ã¹ã§ãããããç¶æ
ããªãŒå
šäœã«ã¢ã¯ã»ã¹ã§ããŸãã
import {someSelector} from "./selectors";
function someThunk(someParameter) {
return (dispatch, getState) => {
const specificData = someSelector(getState(), someParameter);
dispatch({type : "SOME_ACTION", payload : specificData});
}
}
@markeriksonããããšããããã¯çã«ããªã£ãŠããŸãã åèãŸã§ã«ãç§ãå°ããŠããçç±ã¯ãã¬ãã¥ãŒãµãŒã«ãã£ã¹ãããããã®ã§ã¯ãªããã»ã¬ã¯ã¿ãŒã«ãã£ãŠæŽŸçããããŒã¿ãæ€èšŒããžãã¹ããžãã¯ã«äœ¿çšããããšã§ãããããã¯ç§ã«æèã®ç³§ãäžããŠãããŸãã
ã¬ãã¥ãŒãµãŒã1ã€ã«ãŸãšããããã«äœ¿çšããç°¡åãªããã¯ã¯
const reducers = [ reducerA, reducerB, ..., reducerZ ];
let reducer = ( state = initialState, action ) => {
return reducers.reduce( ( state, reducerFn ) => (
reducerFn( state, action )
), state );
};
ããã§ã reducerA
ããreducerZ
ã¯ãåã
ã®ã¬ãã¥ãŒãµãŒé¢æ°ã§ãã
@brianpkelley ïŒhttps://github.com/acdlite/reduce-reducersã§ãã
@markeriksonãããåããŠreact / redux / etcã䜿çšããŠããã®åé¡ã調ã¹ãŠãããšãã«ãã®ã¹ã¬ãããèŠã€ããŸããã ç¬ã®ååãããã§æåŸãŸã§ã¹ãããããŸãã
ããã確ãã«ã
åèãŸã§ã«ã FAQãèªãããšããå§ãããŸãã¬ãã¥ãŒãµãŒã®æ§é åãã»ã¯ã·ã§ã³ã ãŸããç§ã®ãPractical Reduxããã¥ãŒããªã¢ã«ã·ãªãŒãºã«ã¯ãããã€ãã®é«åºŠãªã¬ãã¥ãŒãµãŒãã¯ããã¯ã瀺ãæçš¿ãããã€ããããŸãïŒããŒã7ãšããŒã8ãåç §ïŒã
redux-logicã䜿çšãããšãã®ç§ã®2ã»ã³ãã¯ã transform
é¢æ°ã®ã«ãŒãç¶æ
ããã®ã¢ã¯ã·ã§ã³ãæ¡åŒµããããšã§ãã
äŸïŒ
const formInitLogic = createLogic({
type: 'FORM_INIT',
transform({ getState, action }, next) {
const state = getState();
next({
...action,
payload: {
...action.payload,
property1: state.branch1.someProperty > 5,
property2: state.branch1.anotherProperty + state.branch2.yetAnotherProperty,
},
});
},
});
ç§ã¯ãããã³ãŒãæ§é ã«ã€ããŠã ãšæããŸãïŒ
ããµãã¹ããŒãã¢ã¯ã·ã§ã³ã«çŽæ¥ã¢ã¯ã»ã¹ããªãã§ãã ããã
å€ãã®ãããžã§ã¯ãã§reduxã䜿çšããåŸãæè¯ã®ã³ãŒãæ§é ã¯ããã¹ãŠã®ãµãç¶æ
ãå®å
šã«åé¢ãããã³ã³ããŒãã³ããšããŠåŠçããããšã§ããããšãããããŸããããããã®ã³ã³ããŒãã³ãã®ãã¹ãŠã«ç¬èªã®ãã©ã«ããŒãšããžãã¯ãããããã®ã¢ã€ãã¢ãå®è£
ããã«ã¯ã次ã®ãã¡ã€ã«æ§é ã䜿çšããŸãã
ã©ãã㊠ïŒ
1-ãã¹ãŠã®ã¢ããªã±ãŒã·ã§ã³ã«ã¯2çš®é¡ã®ã¢ã¯ã·ã§ã³ããããŸãã
2-ããã«ãã®æ§é ã䜿çšãããšããã©ã«ããã³ããŒããŠè²Œãä»ããååãå€æŽããã ãã§æ°ããç¶æ ãäœæã§ããŸã;ïŒ
2ã€ã®ã¬ãã¥ãŒãµãŒãåãããããã£ãå€æŽããå¿ èŠãããå Žåã¯ã©ãã§ããïŒ
ç°ãªããã¡ã€ã«ã«åå²ãããã¬ãã¥ãŒãµãŒããããããšã©ãŒããšåŒã°ããããããã£ããããšããŸããããããã¯ãäœããã®çç±ã§httpãªã¯ãšã¹ãã倱æãããšãã«å€æŽããŸãã
ããæç¹ã§ã¬ãã¥ãŒãµãŒã倧ãããªã£ãã®ã§ãããã€ãã®ã¬ãã¥ãŒãµãŒã«åå²ããããšã«ããŸããããããããã¹ãŠã§ãã®ããšã©ãŒãããããã£ãå€æŽããå¿ èŠããããŸãã
ãããäœïŒ
@ Wassap1242ã€ã®ã¬ãã¥ãŒãµãŒãåãç¶æ ã管çããããšã¯ã§ããŸããã 2ã€ã®ã¢ã¯ã·ã§ã³ã§åãããããã£ãå€æŽããå¿ èŠããããšããããšã§ããïŒ
詳现ããªããã°ããµã³ã¯ã䜿çšããŠããšã©ãŒã®èšå®ãã¢ã¯ã·ã§ã³ããã£ã¹ãããããããšããå§ãããŸãã
@ rhys-vdwããªãé·ãã¬ãã¥ãŒãµãŒãåå²ããããšããŠå°ãç«ã¡åŸçããŠããŸãã
ãããŠãããªãã®ææ¡ã«é¢ããŠãããã¯å¯äœçšããªããšããèŠåãšççŸããŸãããïŒ
@ Wassap124 ã@ rhys-vdwïŒæ確ã«ããããã«ã combineReducers
ã®ã¿ã䜿çšããŠããå Žåã2ã€ã®ã¬ãã¥ãŒãµãŒãåãç¶æ
ã管çããããšã¯ã§ããŸããã ãã ããç¬èªã®ãŠãŒã¹ã±ãŒã¹ã«åãããŠä»ã®ã¬ãã¥ãŒãµãŒããžãã¯ãäœæããããšãã§ããŸããhttpsïŒ//redux.js.org/recipes/structuringreducers/beyondcombinereducersãåç
§ããŠ
ã¯ã€ãã¯ãœãŒã¹ã±ã€ãã³ã°ãè¡ãå Žå...
combineReducers
ã¯ã次ã®ãããªé¢æ°ã·ã°ããã£ãè¿ããŸãã
return function combination(state = {}, action) {
https://github.com/reduxjs/redux/blob/master/src/combineReducers.js#L145ãåç §ããŠ
å®éã®ã¬ãã¥ãŒãµãŒãªããžã§ã¯ããåç §ããã¯ããŒãžã£ãäœæããåŸã
ãããã£ãŠãã¹ãã¬ãŒãžããç¶æ ããã€ãã¬ã€ãããŠãªããŒãããå¿ èŠãããå Žåã«ã¢ã¯ã·ã§ã³ãã°ããŒãã«ã«åŠçããããã«ããã®ãããªåçŽãªãã®ãè¿œå ã§ããŸãã
const globalReducerHandler = () => {
return (state = {}, action) => {
if (action.type === 'DO_GLOBAL_THING') {
return globallyModifyState(state)
}
return reducers(state, action)
}
}
ããã¯ã¢ã³ããã¿ãŒã³ã§ããå Žåãšããã§ãªãå ŽåããããŸãããå®çšäž»çŸ©ã¯åžžã«ããéèŠã§ãã
å¥ã®ã¬ãã¥ãŒãµãŒããã¬ãã¥ãŒãµãŒãåŒã³åºã代ããã«ïŒglobalReducerHandlerã¯åŒã³åºãã¬ãã¥ãŒãµãŒãšã¯é¢ä¿ããªãããã¢ã³ããã¿ãŒã³ã§ãïŒã reduceReducers
䜿çšããŸããããã¯åºæ¬çã«ã¬ãã¥ãŒãµãŒã®å Žåã¯compose
ã§ãïŒãŸããæåéã(Action ->)
ã¢ããã®æ§æïŒã
æãåèã«ãªãã³ã¡ã³ã
ãããè¯ããæªããã¯ã¢ããªã«ãã£ãŠç°ãªããŸãã ç§ã®çµéšã§ã¯ãåãã¢ã¯ã·ã§ã³ãåŠçããå€ãã®ã¹ãã¢ïŒãŸãã¯Reduxã¬ãã¥ãŒãµãŒïŒããããšã責任ãåæ ãããããŒã ã®ä»ã®ã¡ã³ããŒãšè¡çªããããšãªãæ©èœãã©ã³ãã§äœæ¥ã§ãããããå®éã«ã¯éåžžã«äŸ¿å©ã§ãã ç§ã®çµéšã§ã¯ã1ã€ã®å·šå€§ãªçªç¶å€ç°ããããç¡é¢ä¿ã®çªç¶å€ç°ãåå¥ã«ç¶æããæ¹ãç°¡åã§ãã
ããããããªãã¯æ£ããã§ãããããããŸãããŸãæ©èœããªãå ŽåããããŸãã ãããã¯ãã°ãã°æ¬¡åã®ç¶æ ã¢ãã«ã®çç¶ã§ãããšæããŸãã äŸãã°ã
åé¡ã®çç¶ã§ãã ç¶æ å ã§ç©ããããã移åããå¿ èŠãããå Žåã¯ãç¶æ ã®åœ¢ç¶ãããæ£èŠåããå¿ èŠããããããããŸããã 代ããã®
{ readMessages, unreadMessages }
ããªããæã€ããšãã§ããŸã{ messagesById, threadsById, messageIdsByThreadIds }
ã ã¡ãã»ãŒãžãèªãã ïŒ ããã§ããããstate.messagesById[id].isRead
åãæ¿ããŸãã ã¹ã¬ããã®ã¡ãã»ãŒãžãèªã¿ããã§ããïŒstate.threadsById[threadId].messageIds
ãããmessageIds.map(id => state.messagesById[id])
ãŸããããŒã¿ãæ£èŠåãããŠããå Žåãããé åããå¥ã®é åã«ã¢ã€ãã ãã³ããŒããå¿ èŠã¯ãããŸããã ã»ãšãã©ã®å Žåããã©ã°ãå転ããããIDãè¿œå /åé€/é¢é£ä»ã/é¢é£ä»ã解é€ãããããŸãã