0.0.2 • Published 4 years ago
@actualwave/redux-side-effect v0.0.2
@actualwave/redux-side-effect
Very simple to use middleware for redux to make side effects for actions. Inspired by redux-saga but not uses genertors, instead relies on async functions and can be used with redux-thunk.
How to use
- Register middleware
import sideEffectMiddleware from '@actualwave/redux-side-effect'; const store = createStore( myReducers, applyMiddleware(sideEffectMiddleware), );
- Add side effects
import { take, put, select, call } from '@actualwave/redux-side-effect';
take('FETCH_DATA', async (action) => {
const { data } = await axios.get('/something');
put({ type: 'FETCH_DATA_SUCCESS', payload: data });
});
take('POST_DATA', async (action) => {
// ....
});
take('PATCH_DATA', async (action) => {
// ....
});
```javascript
That's it.
An example:
```javascript
import sideEffectMiddleware, { take, put, select, call } from '@actualwave/redux-side-effect';
const store = createStore(
myReducers,
compose(
applyMiddleware(thunkMiddleware, sideEffectMiddleware),
// Redux Tool Google Chrome Extension setup
window.__REDUX_DEVTOOLS_EXTENSION__
? window.__REDUX_DEVTOOLS_EXTENSION__()
: compose,
),
);
// Side effect function could be a normal function too
take('action-type', (action) => {
console.log('MY ACTION TYPE INTERCEPTED:', action);
put({ type: 'side-effect-success' });
select((store) => console.log(store));
});
take('async-action-type', async (action) => {
console.log('MY ACTION TYPE INTERCEPTED:', action);
const value = await call(myFunction, 'arg1', 'arg2', 'arg3');
await put({ type: 'side-effect-success', payload: { value } });
select((store) => console.log(store));
});