-
Notifications
You must be signed in to change notification settings - Fork 16
/
redux.flux.txt
134 lines (108 loc) · 9.19 KB
/
redux.flux.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
REDUX
COMPARISON ==> #See Flux doc
VERSION ==> #3.6.0
#Flux implementation:
# - actions:
# - like Flux, but with helper functions (firing)
# - actions creators are passed to views as props
# - dispatcher:
# - no dispatcher, stores listens to all actions, and whitelist them
# - multiple-action orchestration can be done with imperative code
# - stores:
# - when action dispatched, change STORE state with reducer function
# - encourage single per app, divided into substores
# - views:
# - like Flux, listen to stores changes and assign to RFVIEW.state
# - encourage top-level smart component
# - use a mapping function to separate stores states to views state, passed down as props
DIFFERENCE WITH FLUX ==> #STORE takes role of Flux DISPATCHER + REDUCESTORE
# - so single store per app
# - no DISPATCHER.waitFor()
#No FTYPE|view in core, but can use React-redux
/=+===============================+=\
/ : : \
)==: ACTIONS :==(
\ :_______________________________: /
\=+===============================+=/
REDUX.bindActionCreators #With VAL:
(VAL, STORE.dispatch)->VAL # - FUNC2()->ACTION
# - { KEY: FUNC2()->ACTION ... }
#Patches it so that FUNC2() triggers STORE.dispatch(ACTION)
/=+===============================+=\
/ : : \
)==: STORE :==(
\ :_______________________________: /
\=+===============================+=/
REDUX.createStore #APPSTATE0:
(RFUNC([APPSTAT,]ACTION)->APPSTAT2# - default APPSTATE
[, APPSTATE0])->STORE #RFUNC is 'reducer':
# - called on STORE.dispatch(ACTION), to update APPSTATE
# - called at init
# - should be 'pure' (see Flux REDUCESTORE):
# - if unsupported ACTION (including undefined), should return unchanged APPSTATE
# - should never return undefined
STORE.getState()->APPSTATE #
STORE.dispatch(ACTION) #Cannot be called from inside STORE's RFUNC. Returns ACTION.
STORE.subscribe(SFUNC()) #Called when STORE.dispatch(ACTION) has been called and APPSTATE changed.
#Returns unsubscribe FUNC()
STORE.replaceReducer(RFUNC) #
REDUX.combineReducers
({KEY: RFUNC(...)->APPSTATE ...})
->RFUNC2(...)->{KEY: APPSTATE ...}#Allow dividing main reducer into smaller ones
/=+===============================+=\
/ : : \
)==: VIEWS :==(
\ :_______________________________: /
\=+===============================+=/
REACT-REDUX ==> #Version 4.0.0
#Redux version of FluxContainer:
# - updates views when store change
# - should be on 'smart' components (see Flux/React documentation)
<Provider store={STORE}> #Pass STORE as context to single child.
#Must wrap app.
HOC #FUNC(RTYPE)->RTYPE2
REACTREDUX.connect #Make RTYPE:
(FUNC[,FUNC2][,FUNC3][,OPT])->HOC # - update on STORE change, with FUNC() translating store state into components props ("selector")
# to pass down to children (see "Reselect" library)
# - pass bound action creators as components props (using FUNC2), to use in the RCOMP
# (its children should use callbacks to parent)
#RTYPE2:
# - wraps <RTYPE>:
# - if OPT.withRef true (def: false), RCOMP2.refs.wrappedInstance or RCOMP2.getWrappedInstance() = RCOMP
# - RTYPE2.wrappedComponent RTYPE
# - fires RCOMP2 'update' (hence RCOMP 'update'):
# - when STORE change: using STORE.subscribe(), if STORE.getState() changed (using ===)
# - STORE is RCOMP2.props|context.store (e.g. through <Provider>)
# - RCOMP.props:
# - PROPS = shallow merge (or FUNC3 taking them as arguments) of:
# - RCOMP2.props
# - FUNC_RET = FUNC(STORE.getState(), RCOMP2.props)
# - FUNC2_RET = FUNC2(STORE.dispatch, RCOMP2.props)
# - can be OBJ instead, in which case, return bindActionCreators(OBJ, STORE.dispatch)
# - def: return { dispatch: STORE.dispatch }
# - PROPS.storeState = STORE.getState()
# - updated inside shouldComponentUpdate() (hence forceUpdate() does not update it)
# - optimization if OPT.pure true (def):
# - should be used according to same conditions as React PURERENDERMIXIN
# - shouldComponentUpdate() returns false (i.e. RCOMP 'update' not triggered) if PROPS did not change,
# i.e. if RCOMP2.props, FUNC_RET and FUNC2_RET did not change (shallow comparison)
# - only recalculates FUNC[2]() if arguments changed
# (shallow comparison for RCOMP2.props, reference comparison for STORE.getState())
/=+===============================+=\
/ : : \
)==: MIDDLEWARE :==(
\ :_______________________________: /
\=+===============================+=/
REDUX.applyMiddleware
(FUNC(STORE)->FUNC2(FUNC3(ACTION))
->FUNC4(ACTION) ...)->RPATCH #
REDUX.createStore(..., RPATCH) #Patches REDUX.createStore:
RPATCH(REDUX.createStore) # - FUNC() is called during applyMiddleware(). It is a REDUX_MDWR
->CREATESTORE # - FUNC2() is called during CREATESTORE()
# - FUNC4() is called before STORE.dispatch(ACTION)
# - can modify ACTION
# - must call FUNC3(ACTION) to pass to next middleware
#STORE only has members getState() and dispatch(ACTION)
#Both ways to apply RPATCH are equivalent