Skip to content

Commit 858c762

Browse files
authored
Add docs link to readme
1 parent 5093d23 commit 858c762

File tree

1 file changed

+3
-303
lines changed

1 file changed

+3
-303
lines changed

README.md

Lines changed: 3 additions & 303 deletions
Original file line numberDiff line numberDiff line change
@@ -31,309 +31,9 @@ This package is _not_ intended to solve every possible complaint about Redux, an
3131
- 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.
3232
- 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)).
3333

34-
### API Reference
3534

36-
#### `configureStore`
35+
## Documentation
3736

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**.
3938

40-
```js
41-
function configureStore({
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'
60-
61-
import rootReducer from './reducers'
62-
63-
const store = configureStore({ reducer: rootReducer })
64-
// The store now has redux-thunk added and the Redux DevTools Extension is turned on
65-
```
66-
67-
Full example:
68-
69-
```js
70-
import { configureStore, getDefaultMiddleware } from 'redux-starter-kit'
71-
72-
// We'll use redux-logger just as an example of adding another middleware
73-
import logger from 'redux-logger'
74-
75-
// And use redux-batch as an example of adding enhancers
76-
import { reduxBatch } from '@manaflair/redux-batch'
77-
78-
import todosReducer from './todos/todosReducer'
79-
import visibilityReducer from './visibility/visibilityReducer'
80-
81-
const reducer = {
82-
todos: todosReducer,
83-
visibility: visibilityReducer
84-
}
85-
86-
const middleware = [...getDefaultMiddleware(), logger]
87-
88-
const preloadedState = {
89-
todos: [
90-
{
91-
text: 'Eat food',
92-
completed: true
93-
},
94-
{
95-
text: 'Exercise',
96-
completed: false
97-
}
98-
],
99-
visibilityFilter: 'SHOW_COMPLETED'
100-
}
101-
102-
const store = configureStore({
103-
reducer,
104-
middleware,
105-
devTools: NODE_ENV !== 'production',
106-
preloadedState,
107-
enhancers: [reduxBatch]
108-
})
109-
110-
// The store has been created with these options:
111-
// - 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-
function createReducer(
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-
function addTodo(state, action) {
138-
const { newTodo } = action.payload
139-
140-
// Can safely call state.push() here
141-
state.push({ ...newTodo, completed: false })
142-
}
143-
144-
function toggleTodo(state, action) {
145-
const { index } = action.payload
146-
147-
const todo = state[index]
148-
// Can directly modify the todo object
149-
todo.completed = !todo.completed
150-
}
151-
152-
const todosReducer = 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-
function addTodo(state, action) {
164-
const { newTodo } = action.payload
165-
166-
// Updates the state immutably without relying on immer
167-
return [...state, { ...newTodo, completed: false }]
168-
}
169-
170-
function toggleTodo(state, action) {
171-
const { index } = action.payload
172-
173-
const todo = state[index]
174-
// Updates the todo object immutably withot relying on immer
175-
return state.map((todo, i) => {
176-
if (i !== index) return todo
177-
return { ...todo, completed: !todo.completed }
178-
})
179-
}
180-
181-
const todosReducer = 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-
export const increment = createAction('increment')
196-
197-
console.log(increment)
198-
// "increment"
199-
200-
const theAction = increment(5)
201-
console.log(theAction)
202-
// {type : "increment", payload : 5}
203-
204-
// reducer.js
205-
import { increment } from './actions'
206-
207-
function counterReducer(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-
const counterReducer = 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.
236-
237-
```js
238-
import { createSlice } from 'redux-starter-kit'
239-
import { createStore, combineReducers } from 'redux'
240-
241-
const counter = createSlice({
242-
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-
const user = 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-
const reducer = combineReducers({
262-
counter: counter.reducer,
263-
user: user.reducer
264-
})
265-
266-
const store = 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-
const state = 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-
function createSelector(
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
296-
paths : Array<Function | string | Object> | Object<string, string | Function>
297-
)
298-
```
299-
300-
Example usage:
301-
302-
```js
303-
// Define input selector using a string keypath
304-
const getSubtotal = createSelector(['shop.items'], items => {
305-
// return value here
306-
})
307-
308-
// Define input selectors as a mix of other selectors and string keypaths
309-
const getTax = createSelector(
310-
[getSubtotal, 'shop.taxPercent'],
311-
(subtotal, taxPercent) => {
312-
// return value here
313-
}
314-
)
315-
316-
// Define input selector using a custom argument index to access a prop
317-
const getTabContent = createSelector(
318-
[{ path: 'tabIndex', argIndex: 1 }],
319-
tabIndex => {
320-
// return value here
321-
}
322-
)
323-
324-
const getContents = createSelector({ foo: 'foo', bar: 'nested.bar' })
325-
// Returns an object like: {foo, bar}
326-
```
327-
328-
#### `createNextState`
329-
330-
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

Comments
 (0)