@@ -136,42 +136,6 @@ Reset the redux state on certain actions
136136** [ ForbesLindesay/redux-optimist] ( https://github.com/ForbesLindesay/redux-optimist ) ** <br />
137137A 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
240204const 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 />
249209Store enhancer that allows dispatching arrays of actions
250210
251211` ` ` js
252- const store = createStore ( reducer, reduxBatch)
212+ const store = configureStore ({ reducer, enhancers : [ reduxBatch ] } )
253213store .dispatch ([{ type: ' INCREMENT' }, { type: ' INCREMENT' }])
254214` ` `
255215
256216**[laysent/redux-batch-actions-enhancer](https://github.com/laysent/redux-batch-actions-enhancer)** <br />
257217Store enhancer that accepts batched actions
258218
259219` ` ` js
260- const store = createStore ( reducer, initialState, batch ().enhancer )
220+ const store = configureStore ({ reducer, enhancers : [ batch ().enhancer ] } )
261221store .dispatch (createAction ({ type: ' INCREMENT' }, { type: ' INCREMENT' }))
262222` ` `
263223
264224**[tshelburne/redux-batched-actions](https://github.com/tshelburne/redux-batched-actions)** <br />
265225Higher-order reducer that handles batched actions
266226
267227` ` ` js
268- const store = createStore ( enableBatching (reducer), initialState )
228+ const store = configureStore ({ reducer : enableBatching (rootReducer) } )
269229store .dispatch (batchActions ([{ type: ' INCREMENT' }, { type: ' INCREMENT' }]))
270230` ` `
271231
@@ -275,8 +235,18 @@ store.dispatch(batchActions([{ type: 'INCREMENT' }, { type: 'INCREMENT' }]))
275235Persist 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
286256const reducer = storage .reducer (combineReducers (reducers))
287257const engine = createEngineLocalStorage (' my-save-key' )
288258const 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 />
293266Persistent 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) ] } )
297270store .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 />
347336Handle 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 = () => ({
512501An 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+ })
516508store .dispatch ({ type: ' server/hello' , data: ' Hello!' })
517509` ` `
518510
0 commit comments