Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danrigsby/redux-reducer-side-effects
Easy to follow side effect library for redux reducers
https://github.com/danrigsby/redux-reducer-side-effects
functional-programming middleware react redux side-effects
Last synced: about 2 months ago
JSON representation
Easy to follow side effect library for redux reducers
- Host: GitHub
- URL: https://github.com/danrigsby/redux-reducer-side-effects
- Owner: danrigsby
- Created: 2017-07-17T18:26:33.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-07-18T13:55:19.000Z (about 7 years ago)
- Last Synced: 2024-04-23T08:47:36.007Z (5 months ago)
- Topics: functional-programming, middleware, react, redux, side-effects
- Language: JavaScript
- Homepage:
- Size: 66.4 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
Awesome Lists containing this project
- fucking-awesome-web-effect - redux-reducer-side-effects - Easy to follow side effect library for redux reducers (🚀 A series of exquisite and compact web page cool effects / Other Effect)
- awesome-web-effect - redux-reducer-side-effects - Easy to follow side effect library for redux reducers (🚀 A series of exquisite and compact web page cool effects / Other Effect)
README
# redux-reducer-side-effects
Easy to follow side effect library for redux reducers
## Background
### What is a [Side Effect](https://en.wikipedia.org/wiki/Side_effect_(computer_science))?
Anything that modifies some state outside its scope or has an observable interaction with its calling functions or the outside world beyond returning a value.
In redux, this means if your reducer does anything beyond just returning the new state for that reducer, its a side effect and needs to be handled as such.
However, often reducers will need to perform some kind of side effect. In these situations, you want to perform these
side effects "outside" of the reducer. For instance:
1. Inside of a reducer you may want to have the completion of some operation dispatch another operatop on the store.
2. Reducers should not know about one another direct, but may listen for well known actions between them.
### What does this library do for me?
There are a few different side effect libraries out there, but many do more than you need or are hard to follow. Primary goal of this library is to introduce safe side effects in a powerful way, but be simple to read, understand, and implement.
For instance, say you have two reducers, one for login (loginReducer) and the other for content (contentReducer). When a user logs in, you want to retrieve content, and when the user logs out, you want to remove the content.
```javascript
export default function contentReducer(state, action) {
switch (action.type) {
case: 'LOGIN': {
action.addSideEffect((store) => {
store.dispatch.getContent();
});
return state;
}
case: 'LOGOUT': {
action.addSideEffect((store) => {
store.dispatch.clearContent();
});
return state;
}
default: {
return state
}
}
}
```
## Installation
``` sh
# npm
npm install redux-reducer-side-effects --save
# yarn
yarn add redux-reducer-side-effects
```
## Usage
### 1. Wire up the [Middleware](http://redux.js.org/docs/advanced/Middleware.html)
Simply add the [middleware](http://redux.js.org/docs/advanced/Middleware.html) when you create your redux [store](http://redux.js.org/docs/basics/Store.html).
``` javascript
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import addSideEffectMiddleware from 'redux-reducer-side-effects';
import reducers from './reducers';
export default function configureStore() {
const enhancers = compose(
applyMiddleware(
addSideEffectMiddleware()
)
);
return createStore(reducers, {}, enhancers);
}
```
Optionally, the `addSideEffectMiddleware` can take in an options object that defines:
1. `timeout`: The default timeout in milliseconds for all side effects (defaults to 0 or no timeout)
``` javascript
applyMiddleware(
addSideEffectMiddleware({ timeout: 1000 }) // 1 second
)
```
### 2. Add to Reducers
The `addSideEffectMiddleware` adds a new method on the redux reducer `action` called: `addSideEffect`.
This method takes in a function that is passed the entire redux `store`. This allows the side effect to `getState()` or `dispatch` new actions onto the store.
``` javascript
action.addSideEffect((store) => {
// Your side effect goes here such as:
store.dispatch.newAction(action.myNewAction(store.getState().myData));
});
```
Optionally you can also pass in an object to `addSideEffect` that defines two properties:
1. `effect`: the side effect function as defined above
2. `timeout`: a timeout in milliseconds to wrap around the `effect` function call
``` javascript
action.addSideEffect({
effect: (store) => {
// Your side effect goes here such as:
store.dispatch.newAction(action.myNewAction(store.getState().myData));
}
timeout: 1000 // 1 second
});
```
#### Example Reducer
``` javascript
export default (state, action) => {
switch (action.type) {
case: 'MY_ACTION': {
const newState = // Perform what ever you need to do here to get your new state
action.addSideEffect((store) => {
// Your side effect goes here such as:
store.dispatch.newAction(action.myNewAction(store.getState().myData));
});
// Can add more side effects on action.addSideEffect
return newState;
}
default: {
return state
}
}
}
```
### 3. (Optional) Get Information About Side Effects
The `addSideEffectMiddleware` adds a second new method on the redux reducer `action` called: `sideEffectInfo`.
This method returns an object containing information about sideEffects:
1. `count`: the current number of side effects that will be executed. this may be useful for testing or other operations
2. `options`: the original options passed into `addSideEffectMiddleware`. you may use this to look at the default `timeout` or to pass data from the middleware down to sideEffects
## License
`redux-reducer-side-effects` is licensed under the [MIT License](LICENSE).