Skip to content

Commit f79d618

Browse files
phryneashimanshiLt
authored andcommitted
update ecosystem page
* update usages of `createStore` to `configureStore` * add listenerMiddleware to side effects middlewares * remove "Actions" section
1 parent 510f953 commit f79d618

File tree

1 file changed

+41
-49
lines changed

1 file changed

+41
-49
lines changed

docs/introduction/Ecosystem.md

Lines changed: 41 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -136,42 +136,6 @@ Reset the redux state on certain actions
136136
**[ForbesLindesay/redux-optimist](https://github.com/ForbesLindesay/redux-optimist)** <br />
137137
A reducer enhancer to enable type-agnostic optimistic updates
138138

139-
## Actions
140-
141-
**[reduxactions/redux-actions](https://github.com/reduxactions/redux-actions)** <br />
142-
Flux Standard Action utilities for Redux
143-
144-
```js
145-
const increment = createAction('INCREMENT')
146-
const reducer = handleActions({ [increment]: (state, action) => state + 1 }, 0)
147-
const store = createStore(reducer)
148-
store.dispatch(increment())
149-
```
150-
151-
**[BerkeleyTrue/redux-create-types](https://github.com/BerkeleyTrue/redux-create-types)** <br />
152-
Creates standard and async action types based on namespaces
153-
154-
```js
155-
export const types = createTypes(
156-
['openModal', createAsyncTypes('fetch')],
157-
'app'
158-
)
159-
// { openModal : "app.openModal", fetch : { start : "app.fetch.start", complete: 'app.fetch.complete' } }
160-
```
161-
162-
**[maxhallinan/kreighter](https://github.com/maxhallinan/kreighter)** <br />
163-
Generates action creators based on types and expected fields
164-
165-
```js
166-
const formatTitle = (id, title) => ({
167-
id,
168-
title: toTitleCase(title)
169-
})
170-
const updateBazTitle = fromType('UPDATE_BAZ_TITLE', formatTitle)
171-
updateBazTitle(1, 'foo bar baz')
172-
// -> { type: 'UPDATE_BAZ_TITLE', id: 1, title: 'Foo Bar Baz', }
173-
```
174-
175139
## Utilities
176140

177141
**[reduxjs/reselect](https://github.com/reduxjs/reselect)** <br />
@@ -238,34 +202,30 @@ Store enhancer that can debounce subscription notifications
238202
239203
```js
240204
const debounceNotify = _.debounce(notify => notify())
241-
const store = createStore(
242-
reducer,
243-
initialState,
244-
batchedSubscribe(debounceNotify)
245-
)
205+
const store = configureStore({ reducer, enhancers: [ batchedSubscribe(debounceNotify) ] })
246206
```
247207
248208
**[manaflair/redux-batch](https://github.com/manaflair/redux-batch)** <br />
249209
Store enhancer that allows dispatching arrays of actions
250210
251211
```js
252-
const store = createStore(reducer, reduxBatch)
212+
const store = configureStore({ reducer, enhancers: [ reduxBatch ] })
253213
store.dispatch([{ type: 'INCREMENT' }, { type: 'INCREMENT' }])
254214
```
255215
256216
**[laysent/redux-batch-actions-enhancer](https://github.com/laysent/redux-batch-actions-enhancer)** <br />
257217
Store enhancer that accepts batched actions
258218
259219
```js
260-
const store = createStore(reducer, initialState, batch().enhancer)
220+
const store = configureStore({ reducer, enhancers: [ batch().enhancer ] })
261221
store.dispatch(createAction({ type: 'INCREMENT' }, { type: 'INCREMENT' }))
262222
```
263223
264224
**[tshelburne/redux-batched-actions](https://github.com/tshelburne/redux-batched-actions)** <br />
265225
Higher-order reducer that handles batched actions
266226
267227
```js
268-
const store = createStore(enableBatching(reducer), initialState)
228+
const store = configureStore({ reducer: enableBatching(rootReducer) })
269229
store.dispatch(batchActions([{ type: 'INCREMENT' }, { type: 'INCREMENT' }]))
270230
```
271231
@@ -275,8 +235,18 @@ store.dispatch(batchActions([{ type: 'INCREMENT' }, { type: 'INCREMENT' }]))
275235
Persist and rehydrate a Redux store, with many extensible options
276236
277237
```js
278-
const store = createStore(reducer, autoRehydrate())
279-
persistStore(store)
238+
const persistConfig = { key: 'root', version: 1, storage }
239+
const persistedReducer = persistReducer(persistConfig, rootReducer)
240+
export const store = configureStore({
241+
reducer: persistedReducer,
242+
middleware: (getDefaultMiddleware) =>
243+
getDefaultMiddleware({
244+
serializableCheck: {
245+
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
246+
},
247+
}),
248+
})
249+
export const persistor = persistStore(store)
280250
```
281251
282252
**[react-stack/redux-storage](https://github.com/react-stack/redux-storage)** <br />
@@ -286,14 +256,17 @@ Persistence layer for Redux with flexible backends
286256
const reducer = storage.reducer(combineReducers(reducers))
287257
const engine = createEngineLocalStorage('my-save-key')
288258
const storageMiddleware = storage.createMiddleware(engine)
289-
const store = createStore(reducer, applyMiddleware(storageMiddleware))
259+
const store = configureStore({
260+
reducer,
261+
middleware: getDefaultMiddleware => getDefaultMiddleware.concat(storageMiddleware)
262+
})
290263
```
291264
292265
**[redux-offline/redux-offline](https://github.com/redux-offline/redux-offline)** <br />
293266
Persistent store for Offline-First apps, with support for optimistic UIs
294267
295268
```js
296-
const store = createStore(reducer, offline(offlineConfig))
269+
const store = configureStore({ reducer, enhancer: [ offline(offlineConfig) ] })
297270
store.dispatch({
298271
type: 'FOLLOW_USER_REQUEST',
299272
meta: { offline: { effect: {}, commit: {}, rollback: {} } }
@@ -343,6 +316,22 @@ function addTodosIfAllowed(todoText) {
343316
}
344317
```
345318
319+
**[listenerMiddleware (Redux Toolkit)](https://redux-toolkit.js.org/api/createListenerMiddleware)** <br />
320+
listenerMiddleware is intended to be a lightweight alternative to more widely used Redux async middleware like sagas and observables. While similar to thunks in level of complexity and concept, it can be used to replicate some common saga usage patterns.
321+
322+
```js
323+
listenerMiddleware.startListening({
324+
matcher: isAnyOf(action1, action2, action3),
325+
effect: (action, listenerApi) => {
326+
const user = selectUserDetails(listenerApi.getState())
327+
328+
const { specialData } = action.meta
329+
330+
analyticsApi.trackUsage(action.type, user, specialData)
331+
},
332+
})
333+
```
334+
346335
**[redux-saga/redux-saga](https://github.com/redux-saga/redux-saga)** <br />
347336
Handle async logic using synchronous-looking generator functions. Sagas return descriptions of effects, which are executed by the saga middleware, and act like "background threads" for JS applications.
348337
@@ -512,7 +501,10 @@ const fetchUsers = () => ({
512501
An opinionated connector between socket.io and redux.
513502
514503
```js
515-
const store = createStore(reducer, applyMiddleware(socketIoMiddleware))
504+
const store = configureStore({
505+
reducer,
506+
middleware: getDefaultMiddleware => getDefaultMiddleware.concat(socketIoMiddleware)
507+
})
516508
store.dispatch({ type: 'server/hello', data: 'Hello!' })
517509
```
518510

0 commit comments

Comments
 (0)