It is an unofficial utility function that is designed to reduce verbosity of redux action creators. It is so simple that can fit into a single line of code, but I think it's nice to have on NPM.
npm i --save @madappgang/action-creator
importactionCreatorfrom'@madappgang/action-creator';
Here we have a common redux action that fetches users.
consttypes={FETCH_ATTEMPT:'FETCH_ATTEMPT',FETCH_SUCCESS:'FETCH_SUCCESS',FETCH_FAILURE:'FETCH_FAILURE',};constfetchAttempt=()=>({type:types.FETCH_ATTEMPT,});constfetchSuccess=users=>({type:types.FETCH_SUCCESS,payload:users,});constfetchFailure=err=>({type:types.FETCH_FAILURE,payload:err,});exportconstfetchUsers=()=>async(dispatch)=>{dispatch(fetchAttempt());try{ ...dispatch(fetchSuccess(users));}catch(err){dispatch(fetchFailure(err));}};Actions creators look pretty verbose, and you may have a lot of those in each file. Here's what we can do.
importactionCreatorfrom'action-creator-redux';...constfetchAttempt=actionCreator(types.FETCH_ATTEMPT);constfetchSuccess=actionCreator(types.FETCH_SUCCESS);constfetchFailure=actionCreator(types.FETCH_FAILURE);...
The rest of the code remains the same. This approach implies that you adhere to unified structure of redux action. It means that all the data the action holds is put inside thepayload property.
constfetchSuccess=actionCreator(types.FETCH_SUCCESS);fetchSuccess('This is payload');// { type: 'FETCH_SUCCESS', payload: 'This is payload' }There is nothing more to it.
This project is licensed under the MIT License - see the LICENSE file for details.
