You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+3-303Lines changed: 3 additions & 303 deletions
Original file line number
Diff line number
Diff line change
@@ -31,309 +31,9 @@ This package is _not_ intended to solve every possible complaint about Redux, an
31
31
- A `createSlice()` function that accepts a set of reducer functions, a slice name, and an initial state value, and automatically generates corresponding action creators, types, and simple selector functions.
32
32
- An improved version of the widely used `createSelector` utility for creating memoized selector functions, which can accept string keypaths as "input selectors" (re-exported from the [`selectorator` library](https://github.com/planttheidea/selectorator)).
33
33
34
-
### API Reference
35
34
36
-
#### `configureStore`
35
+
##Documentation
37
36
38
-
A friendlier abstraction over the standard Redux `createStore` function. Takes a single configuration object parameter, with the following options:
37
+
The `redux-starter-kit` docs are now published at **https://redux-starter-kit.js.org**.
39
38
40
-
```js
41
-
functionconfigureStore({
42
-
// A single reducer function that will be used as the root reducer,
43
-
// or an object of slice reducers that will be passed to combineReducers()
44
-
reducer:Object<string, Function>|Function,
45
-
// An array of Redux middlewares. If not supplied, defaults to just redux-thunk.
46
-
middleware:Array<MiddlewareFunction>,
47
-
// Built-in support for devtools. Defaults to true.
48
-
devTools: boolean,
49
-
// Same as current createStore.
50
-
preloadedState : State,
51
-
// Same as current createStore.
52
-
enhancer : ReduxStoreEnhancer,
53
-
})
54
-
```
55
-
56
-
Basic usage:
57
-
58
-
```js
59
-
import { configureStore } from 'redux-starter-kit'
// - The slice reducers were automatically passed to combineReducers()
112
-
// - redux-thunk and redux-logger were added as middleware
113
-
// - The Redux DevTools Extension is disabled for production
114
-
// - The middleware, batch, and devtools enhancers were automatically composed together
115
-
```
116
-
117
-
#### `getDefaultMiddleware`
118
-
119
-
`getDefaultMiddleware` is useful if you need to add custom middlewares without removing redux-starter-kit's default middleware. Currently it returns an array with `redux-thunk`.
120
-
121
-
#### `createReducer`
122
-
123
-
A utility function to create reducers that handle specific action types, similar to the example function in the ["Reducing Boilerplate" Redux docs page](https://redux.js.org/recipes/reducing-boilerplate#generating-reducers). Takes an initial state value and an object that maps action types to case reducer functions. Internally, it uses the [`immer` library](https://github.com/mweststrate/immer), so you can write code in your case reducers that mutates the existing `state` value, and it will correctly generate immutably-updated state values instead.
124
-
125
-
```js
126
-
functioncreateReducer(
127
-
initialState:State,
128
-
actionsMap:Object<String, Function>
129
-
) {}
130
-
```
131
-
132
-
Example usage:
133
-
134
-
```js
135
-
import { createReducer } from'redux-starter-kit'
136
-
137
-
functionaddTodo(state, action) {
138
-
const { newTodo } =action.payload
139
-
140
-
// Can safely call state.push() here
141
-
state.push({ ...newTodo, completed:false })
142
-
}
143
-
144
-
functiontoggleTodo(state, action) {
145
-
const { index } =action.payload
146
-
147
-
consttodo= state[index]
148
-
// Can directly modify the todo object
149
-
todo.completed=!todo.completed
150
-
}
151
-
152
-
consttodosReducer=createReducer([], {
153
-
ADD_TODO: addTodo,
154
-
TOGGLE_TODO: toggleTodo
155
-
})
156
-
```
157
-
158
-
This doesn't mean that you _have to_ write code in your case reducers that mutates the existing `state` value, you can still write code that updates the state immutably. You can think of `immer` as a safety net, if the code is written in a way that mutates the state directly, `immer` will make sure that such update happens immutably. On the other hand the following code is still valid:
159
-
160
-
```js
161
-
import { createReducer } from'redux-starter-kit'
162
-
163
-
functionaddTodo(state, action) {
164
-
const { newTodo } =action.payload
165
-
166
-
// Updates the state immutably without relying on immer
// Updates the todo object immutably withot relying on immer
175
-
returnstate.map((todo, i) => {
176
-
if (i !== index) return todo
177
-
return { ...todo, completed:!todo.completed }
178
-
})
179
-
}
180
-
181
-
consttodosReducer=createReducer([], {
182
-
ADD_TODO: addTodo,
183
-
TOGGLE_TODO: toggleTodo
184
-
})
185
-
```
186
-
187
-
#### `createAction`
188
-
189
-
A utility function to create an action creator for the given action type string. The action creator accepts a single argument, which will be included in the action object as a field called `payload`. The action creator function will also have its `toString()` overriden so that it returns the action type, allowing it to be used in reducer logic that is looking for that action type.
190
-
191
-
```js
192
-
// actions.js
193
-
import { createAction } from'redux-starter-kit'
194
-
195
-
exportconstincrement=createAction('increment')
196
-
197
-
console.log(increment)
198
-
// "increment"
199
-
200
-
consttheAction=increment(5)
201
-
console.log(theAction)
202
-
// {type : "increment", payload : 5}
203
-
204
-
// reducer.js
205
-
import { increment } from'./actions'
206
-
207
-
functioncounterReducer(state=0, action) {
208
-
switch (action.type) {
209
-
// action creator can be used directly as the type for comparisons
210
-
case increment: {
211
-
return state +action.payload
212
-
}
213
-
default:
214
-
return state
215
-
}
216
-
}
217
-
```
218
-
219
-
Since action creators returned by `createAction` have `toString()` overridden, they can be used in `createReducer` as a key in the `actionsMap`:
220
-
221
-
```js
222
-
// reducer.js
223
-
import { createReducer } from'redux-starter-kit'
224
-
import { increment } from'./actions'
225
-
226
-
constcounterReducer=createReducer(0, {
227
-
[increment]: (state, action) => state +action.payload
228
-
})
229
-
```
230
-
231
-
#### `createSlice`
232
-
233
-
A function that accepts an initial state, an object full of reducer functions, and optionally a "slice name", and automatically generates action creators, action types, and selectors that correspond to the reducers and state.
234
-
235
-
The reducers will be wrapped in the `createReducer()` utility, and so they can safely "mutate" the state they are given.
slice:'counter', // slice is optional, and could be blank ''
243
-
initialState:0,
244
-
reducers: {
245
-
increment:state=> state +1,
246
-
decrement:state=> state -1,
247
-
multiply: (state, action) => state *action.payload
248
-
}
249
-
})
250
-
251
-
constuser=createSlice({
252
-
slice:'user',
253
-
initialState: { name:'' },
254
-
reducers: {
255
-
setUserName: (state, action) => {
256
-
state.name=action.payload// mutate the state all you want with immer
257
-
}
258
-
}
259
-
})
260
-
261
-
constreducer=combineReducers({
262
-
counter:counter.reducer,
263
-
user:user.reducer
264
-
})
265
-
266
-
conststore=createStore(reducer)
267
-
268
-
store.dispatch(counter.actions.increment())
269
-
// -> { counter: 1, user: {} }
270
-
store.dispatch(counter.actions.increment())
271
-
// -> { counter: 2, user: {} }
272
-
store.dispatch(counter.actions.multiply(3))
273
-
// -> { counter: 6, user: {} }
274
-
console.log(`${counter.actions.decrement}`)
275
-
// -> counter/decrement
276
-
store.dispatch(user.actions.setUserName('eric'))
277
-
// -> { counter: 6, user: { name: 'eric' } }
278
-
conststate=store.getState()
279
-
console.log(user.selectors.getUser(state))
280
-
// -> { name: 'eric' }
281
-
console.log(counter.selectors.getCounter(state))
282
-
// -> 6
283
-
```
284
-
285
-
#### `createSelector`
286
-
287
-
The `createSelector` utility from the [`selectorator` library](https://github.com/planttheidea/selectorator), re-exported for ease of use. It acts as a superset of the standard `createSelector` function from [Reselect](https://github.com/reactjs/reselect). The primary improvements are the ability to define "input selectors" using string keypaths, or return an object result based on an object of keypaths. It also accepts an object of customization options for more specific use cases.
288
-
289
-
For more specifics, see the [`selectorator` usage documentation](https://github.com/planttheidea/selectorator#usage).
290
-
291
-
```js
292
-
functioncreateSelector(
293
-
// Can either be:
294
-
// - An array containing selector functions, string keypaths, and argument objects
295
-
// - An object whose keys are selector functions and string keypaths
The default immutable update function from the [`immer` library](https://github.com/mweststrate/immer#api), re-exported here as `createNextState` (also commonly referred to as `produce`)
331
-
332
-
#### `combineReducers`
333
-
334
-
Redux's `combineReducers`, re-exported for convenience. While `configureStore` calls this internally, you may wish to call it yourself to compose multiple levels of slice reducers.
335
-
336
-
#### `compose`
337
-
338
-
Redux's `compose`. It composes functions from right to left.
339
-
This is a functional programming utility. You might want to use it to apply several store custom enhancers/ functions in a row.
39
+
We're currently expanding and rewriting our docs content - check back soon for more updates!
0 commit comments