-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathredux-devtools.redux.txt
114 lines (93 loc) · 7.31 KB
/
redux-devtools.redux.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
┏━━━━━━━━━━━━━━━━━━━━┓
┃ REDUX-DEVTOOLS ┃
┗━━━━━━━━━━━━━━━━━━━━┛
VERSION ==> #3.0.0
#Allows:
# - redux-devtools:
# - base for others
# - persistState(): load|save current STATE
# - redux-devtools-dock-monitor: dock container
# - redux-devtools-log|diff-monitor: see|manipulate STATE|ACTION history
# - redux-slider-monitor: manipulate STATE history with a slider
# - redux-devtools-chart-monitor: show current STATE as a node graph
#Should only be done in dev.
#Requires React-Redux
RDEVTOOLS.createDevTools #Need to use REDUX.compose(...) instead of REDUX.applyMiddleware(...).
(RCOMP)->RCOMP2 #This will give RCOMP ways to get|set all STORE's histories through:
REDUX.compose # - RDEVTOOLS.ActionCreators:
(REDUX.applyMiddleware(...), # - performAction(ACTION)
RCOMP2.instrument()) # - reset(): go back to initial STATE
# - commit()
# - rollback(): go back to last committed STATE
# - toggleAction(ACTION_ID): toggle ACTION
# - sweep(): remove all toggled off ACTION
# - jumpToState(NUM): go back|forth in history
# - importState({ nextLiftedState: OBJ }): replace everything (same format as props)
# - props:
# - monitorState STATE
# - computedStates STATE_ARR
# - currentStateIndex: current STATE
# - actionsById.ACTION_ID ACTION
# - nextActionId ACTION_ID
# - committedState: last commit
# - stagedActionIds: list of ACTIONs since last commit
# - skippedActionIds: list of ACTIONs toggled off
#Must use RCOMP designed for this ("devtools monitors")
RDEVTOOLS.persistState(STR) #Must be put after RCOMP2.instrument() in REDUX.compose()
#This will:
# - set current STATE on localStorage: JSON.stringify(STATE) with key 'redux-dev-session-STR'
# - get it at app load:
# - can retrieve STR with custom logic like URL query variable
┌─────────────────────────────────┐
│ REDUX-DEVTOOLS-DOCK-MONITOR │
└─────────────────────────────────┘
VERSION ==> #1.0.1
<DockMonitor> #Redux-devtools-aware RCOMP, "dock" container for others.
defaultIsVisible={BOOL} #Def: false
toggleVisiblityKey="STR" #E.g. "ctrl-h"
defaultPosition="STR" #Def: "right"
changePositionKey="STR" #E.g. "ctrl-w"
fluid={BOOL} #If true (def), size is percentage of width|height
defaultSize={NUM} #If fluid, percentage (def: 0.3). Otherwise, pixel size.
┌────────────────────────────────┐
│ REDUX-DEVTOOLS-LOG-MONITOR │
└────────────────────────────────┘
VERSION ==> #1.0.1
<LogMonitor> #Redux-devtools-aware RCOMP
#Show history of ACTION and STATE.
#Can manipulate history with: reset, revert, commit, sweep, toggle
select={FUNC(STATE)->OBJ} #Only show part of the STATE
preserveScrollTop={BOOL} #Preserve scroll for each ACTION (must use RDEVTOOLS.persistState())
┌─────────────────────────────────┐
│ REDUX-DEVTOOLS-DIFF-MONITOR │
└─────────────────────────────────┘
VERSION ==> #3.0.0
<DiffMonitor> #Like <LogMonitor> but show STATE difference as diff.
┌──────────────────────────┐
│ REDUX-SLIDER-MONITOR │
└──────────────────────────┘
VERSION ==> #1.0.0
<SliderMonitor> #Redux-devtools-aware RCOMP
#Allow undoing|redoing history with a slider.
keyboardEnabled={BOOL} #Shortcuts: ctrl+[ ctrl+] ctrl+j
min|max={NUM} #Def: 0|100
minDistance={NUM} #Def: 0
orientation="STR" #"horizontal" (def) or "vertical"
disabled={BOOL} #
┌──────────────────────────────────┐
│ REDUX-DEVTOOLS-CHART-MONITOR │
└──────────────────────────────────┘
VERSION ==> #1.0.0
<ChartMonitor> #Redux-devtools-aware RCOMP
#Show current STATE as a node graph.
┌──────────────────────────────┐
│ REDUX-DEVTOOLS-EXTENSION │
└──────────────────────────────┘
VERSION ==> #0.4.10
#Chrome extension including:
# - Redux-devtools-log-monitor
# - persistState() (with query variable 'debug_session')
#Must put instead of RCOMP2.instrument():
# WINDOW.devToolsExtension ? WINDOW.devToolsExtension() : function (f) { return f; }
#See online doc on how to make it work like a panel.
WINDOW.devToolsExtension.open() #Programmatic use