redux-act-dispatch-free

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

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

Example

createAsyncCycle new at 17 nov 2017

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

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

export const [fetchGetUserData, successGetUserData, errorGetUserData] = createAsyncCycle(
  'get user data',
  store => () => api.getUserData(store.getState().app.user.uid),
  // success
  payload => payload.data,
  // error
  error => error.response.status
);

More custom way

// userActions.js
import { createAction } from 'redux-act';
import { createAsyncAction } from 'redux-act-dispatch-free';
 
export const responseUserInfo = createAction('response user Info');
export const errorResponceUserInfo = createAction('error response user Info');
 
export const fetchUserInfo = createAsyncAction(
  'request user data',
  store => async userId => {
    try {
      const response = await api.getUser(userId);
      responceUserInfo(response.data);
    } catch (e) {
      console.error(e)
      errorResponceUserInfo(e.message ? e.message : e);
    }
  }
);

// initStore.js
import { asyncActionsCallerMiddleware } from 'redux-act-dispatch-free';
import { assignAll } from 'redux-act';
import actions from 'actions';
//...
  const store = createStore(
    reducers,
    applyMiddleware(asyncActionsCallerMiddleware)
  );
  assignAll(actions, store);
//...

// Component.jsx
import { fetchUserInfo } from 'actions/userActions';
//...
  componentDidMount = () => {
    fetchUserInfo(this.props.yuerId)
  };
//...

Attention: bindAll and assignAll do not work with SSR