Free your component from connect, free yourself from extra code

redux-act-dispatch-free extends redux-act so that you can call async actions without dispatch.

Of course this works only with assigned or bound actions

So it allows you to access a bound store from an asyncAction

Instalation

1npm install redux-act-dispatch-free --save

Example

createAsyncCycle new at 17 nov 2017

1// userActions.js
2import { createAsyncCycle } from 'redux-act-dispatch-free';
3
4// You can return any async (or not) function
5// and thay will automaticaly dispatch all async lifecicle functions
6export const [fetchGetUserData, successGetUserData, errorGetUserData] = createAsyncCycle(
7  'get user data',
8  store => () => api.getUserData(store.getState().app.user.uid)
9);

Call fetchGetUserData will generate:

"[fetch] get user data"

...after some time...

"[success] get user data" or "[error] get user data"

You can customize output payload

1export const [fetchGetUserData, successGetUserData, errorGetUserData] = createAsyncCycle(
2  'get user data',
3  store => () => api.getUserData(store.getState().app.user.uid),
4  // success
5  payload => payload.data,
6  // error
7  error => error.response.status
8);

More custom way

1// userActions.js
2import { createAction } from 'redux-act';
3import { createAsyncAction } from 'redux-act-dispatch-free';
4
5export const responseUserInfo = createAction('response user Info');
6export const errorResponceUserInfo = createAction('error response user Info');
7
8export const fetchUserInfo = createAsyncAction(
9  'request user data',
10  store => async userId => {
11    try {
12      const response = await api.getUser(userId);
13      responceUserInfo(response.data);
14    } catch (e) {
15      console.error(e)
16      errorResponceUserInfo(e.message ? e.message : e);
17    }
18  }
19);

1// initStore.js
2import { asyncActionsCallerMiddleware } from 'redux-act-dispatch-free';
3import { assignAll } from 'redux-act';
4import actions from 'actions';
5//...
6  const store = createStore(
7    reducers,
8    applyMiddleware(asyncActionsCallerMiddleware)
9  );
10  assignAll(actions, store);
11//...

1// Component.jsx
2import { fetchUserInfo } from 'actions/userActions';
3//...
4  componentDidMount = () => {
5    fetchUserInfo(this.props.yuerId)
6  };
7//...

Attention: bindAll and assignAll do not work with SSR