@@ -10,14 +10,15 @@ _simple undo/redo functionality for redux state containers_
10
10
11
11
** Switching from 0.x to 1.0 (beta):** Make sure to update your programs to the [ latest History API] ( #history-api ) .
12
12
13
+ ---
13
14
14
- ## Installation
15
+ ** This README is about the new 1.0-beta branch of redux-undo, if you are using
16
+ or plan on using 0.6, check out [ the ` 0.6 ` branch] ( https://github.com/omnidan/redux-undo/tree/0.6 ) **
15
17
16
- ```
17
- npm install --save redux-undo
18
- ```
18
+ ---
19
19
20
- Or you can install the beta:
20
+
21
+ ## Installation
21
22
22
23
```
23
24
npm install --save redux-undo@beta
@@ -102,10 +103,13 @@ perform undo/redo operations on your state:
102
103
store .dispatch (ActionCreators .undo ()) // undo the last action
103
104
store .dispatch (ActionCreators .redo ()) // redo the last action
104
105
106
+ store .dispatch (ActionCreators .jump (- 2 )) // undo 2 steps
107
+ store .dispatch (ActionCreators .jump (5 )) // redo 5 steps
108
+
105
109
store .dispatch (ActionCreators .jumpToPast (index)) // jump to requested index in the past[] array
106
110
store .dispatch (ActionCreators .jumpToFuture (index)) // jump to requested index in the future[] array
107
111
108
- store .dispatch (ActionCreators .clearHistory ()) // Remove all items from past[] and future[] arrays
112
+ store .dispatch (ActionCreators .clearHistory ()) // [beta only] Remove all items from past[] and future[] arrays
109
113
```
110
114
111
115
@@ -123,18 +127,14 @@ undoable(reducer, {
123
127
undoType: ActionTypes .UNDO , // define a custom action type for this undo action
124
128
redoType: ActionTypes .REDO , // define a custom action type for this redo action
125
129
130
+ jumpType: ActionTypes .JUMP , // define custom action type for this jump action
131
+
126
132
jumpToPastType: ActionTypes .JUMP_TO_PAST , // define custom action type for this jumpToPast action
127
133
jumpToFutureType: ActionTypes .JUMP_TO_FUTURE , // define custom action type for this jumpToFuture action
128
134
129
- clearHistoryType: ActionTypes .CLEAR_HISTORY , // define custom action type for this clearHistory action
135
+ clearHistoryType: ActionTypes .CLEAR_HISTORY , // [beta only] define custom action type for this clearHistory action
130
136
131
- initialState: undefined , // initial state (e.g. for loading)
132
- initTypes: [' @@redux/INIT' , ' @@INIT' ] // history will be (re)set upon init action type
133
- initialHistory: { // initial history (e.g. for loading)
134
- past: [],
135
- present: config .initialState ,
136
- future: []
137
- },
137
+ initTypes: [' @@redux-undo/INIT' ] // history will be (re)set upon init action type
138
138
139
139
debug: false , // set to `true` to turn on debugging
140
140
})
@@ -143,50 +143,90 @@ undoable(reducer, {
143
143
** Note:** If you want to use just the ` initTypes ` functionality, but not import
144
144
the whole redux-undo library, use [ redux-recycle] ( https://github.com/omnidan/redux-recycle ) !
145
145
146
- ### Filtering Actions
146
+ #### Initial State and History
147
147
148
- If you don't want to include every action in the undo/redo history, you can
149
- pass a function to ` undoable ` like this:
148
+ You can use your redux store to set an initial history for your undoable reducers:
150
149
151
150
``` js
152
- undoable (reducer, {
153
- filter : function filterActions (action , currentState , previousState ) {
154
- return action .type === SOME_ACTION ; // only add to history if action is SOME_ACTION
155
- }
156
- })
157
151
158
- // or you could do...
152
+ import { createStore } from ' redux' ;
153
+
154
+ const initialHistory = {
155
+ past: [0 , 1 , 2 , 3 ],
156
+ present: 4 ,
157
+ future: [5 , 6 , 7 ]
158
+ }
159
+
160
+ const store = createStore (undoable (counter), initialHistory);
161
+
162
+ ```
163
+
164
+ Or just set the current state like you're used to with Redux. Redux-undo will create the history for you:
165
+
166
+ ``` js
167
+
168
+ import { createStore } from ' redux' ;
169
+
170
+ const store = createStore (undoable (counter), {foo: ' bar' });
171
+
172
+ // will make the state look like this:
173
+ {
174
+ past: [],
175
+ present: {foo: ' bar' },
176
+ future: []
177
+ }
159
178
160
- undoable (reducer, {
161
- filter : function filterState (action , currentState , previousState ) {
162
- return currentState !== previousState; // only add to history if state changed
163
- }
164
- })
165
179
```
166
180
167
- Or you can use the ` distinctState ` , ` includeAction ` and ` excludeAction ` helpers,
168
- which should be imported like this:
181
+ ### Filtering Actions
182
+
183
+ If you don't want to include every action in the undo/redo history, you can
184
+ add a ` filter ` function to ` undoable ` . ` redux-undo ` provides you with the
185
+ ` includeAction ` and ` excludeAction ` helpers for basic filtering.
186
+
187
+ They should be imported like this:
169
188
170
189
``` js
171
- import undoable , { distinctState , includeAction , excludeAction } from ' redux-undo' ;
190
+ import undoable , { includeAction , excludeAction } from ' redux-undo' ;
172
191
```
173
192
174
- Now you can use the helper, which is pretty simple :
193
+ Now you can use the helper functions :
175
194
176
195
``` js
177
196
undoable (reducer, { filter: includeAction (SOME_ACTION ) })
178
197
undoable (reducer, { filter: excludeAction (SOME_ACTION ) })
179
198
180
- // or you could do...
199
+ // they even support Arrays:
181
200
182
- undoable (reducer, { filter: distinctState () })
201
+ undoable (reducer, { filter: includeAction ([SOME_ACTION , SOME_OTHER_ACTION ]) })
202
+ undoable (reducer, { filter: excludeAction ([SOME_ACTION , SOME_OTHER_ACTION ]) })
183
203
```
184
204
185
- ... they even support Arrays:
205
+ ** Note:** Since [ ` beta4 ` ] ( https://github.com/omnidan/redux-undo/releases/tag/beta4 ) ,
206
+ only actions resulting in a new state are recorded. This means the
207
+ (now deprecated) ` distinctState() ` filter is auto-applied.
208
+
209
+ #### Custom filters
210
+
211
+ If you want to create your own filter, pass in a function with the signature
212
+ ` (action, currentState, previousHistory) ` . For example:
186
213
187
214
``` js
188
- undoable (reducer, { filter: includeAction ([SOME_ACTION , SOME_OTHER_ACTION ]) })
189
- undoable (reducer, { filter: excludeAction ([SOME_ACTION , SOME_OTHER_ACTION ]) })
215
+ undoable (reducer, {
216
+ filter : function filterActions (action , currentState , previousHistory ) {
217
+ return action .type === SOME_ACTION ; // only add to history if action is SOME_ACTION
218
+ }
219
+ })
220
+
221
+ // The entire `history` state is available to your filter, so you can make
222
+ // decisions based on past or future states:
223
+
224
+ undoable (reducer, {
225
+ filter : function filterState (action , currentState , previousHistory ) {
226
+ let { past, present, future } = previousHistory;
227
+ return future .length === 0 ; // only add to history if future is empty
228
+ }
229
+ })
190
230
```
191
231
192
232
### Ignoring Actions
0 commit comments