https://github.com/pofigizm/redux-dynamic-middlewares
Allow add or remove redux middlewares dynamically
https://github.com/pofigizm/redux-dynamic-middlewares
code-splitting dynamic middlewares redux redux-dynamic-middlewares
Last synced: 6 months ago
JSON representation
Allow add or remove redux middlewares dynamically
- Host: GitHub
- URL: https://github.com/pofigizm/redux-dynamic-middlewares
- Owner: pofigizm
- License: mit
- Created: 2017-02-23T07:05:55.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-04-06T07:35:59.000Z (over 3 years ago)
- Last Synced: 2025-04-02T05:10:02.714Z (6 months ago)
- Topics: code-splitting, dynamic, middlewares, redux, redux-dynamic-middlewares
- Language: JavaScript
- Size: 162 KB
- Stars: 70
- Watchers: 1
- Forks: 25
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# redux-dynamic-middlewares
ℹ️ If you are building big redux app see [redux-dynamic](https://github.com/pofigizm/redux-dynamic).
[](https://www.npmjs.com/package/redux-dynamic-middlewares)
[](https://www.npmjs.com/package/redux-dynamic-middlewares)
Allow add or remove redux middlewares dynamically (for example: on route change).
```
npm install --save redux-dynamic-middlewares
```
## Example
common usage:
```js
// configure store
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducers/index'
import dynamicMiddlewares from 'redux-dynamic-middlewares'
const store = createStore(
rootReducer,
applyMiddleware(
// ... other static middlewares
dynamicMiddlewares
)
)
// some other place in your code
import { addMiddleware, removeMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares'
const myMiddleware = store => next => action => {
// do something
return next(action)
}
// will add middleware to existing chain
addMiddleware(myMiddleware /*[, anotherMiddleware ... ]*/)
// will remove middleware from chain (only which was added by `addMiddleware`)
removeMiddleware(myMiddleware)
// clean all dynamic middlewares
resetMiddlewares()
```
complex usage (when need many instances):
```js
// configure store
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducers/index'
import { createDynamicMiddlewares } from 'redux-dynamic-middlewares'
const dynamicMiddlewaresInstance = createDynamicMiddlewares()
const store = createStore(
rootReducer,
applyMiddleware(
// ... other static middlewares
dynamicMiddlewaresInstance.enhancer
)
)
// some other place in your code
const myMiddleware = store => next => action => {
// do something
return next(action)
}
// will add middleware to existing chain
dynamicMiddlewaresInstance.addMiddleware(myMiddleware /*[, anotherMiddleware ... ]*/)
// will remove middleware from chain (only which was added by `addMiddleware`)
dynamicMiddlewaresInstance.removeMiddleware(myMiddleware)
// clean all dynamic middlewares
dynamicMiddlewaresInstance.resetMiddlewares()
```