0.0.2 • Published 4 years ago

@actualwave/redux-side-effect v0.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

@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

  1. Register middleware
    import sideEffectMiddleware from '@actualwave/redux-side-effect';
    
    const store = createStore(
     myReducers,
     applyMiddleware(sideEffectMiddleware),
    );
  2. 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));
});