Redux Async Actions Factory
What is it?
Tired of always copy pasting a lot of redux boilerplate everytime you create a new store, or handle an async action?
- Automaticaly generate the state of your async actions!
- Automaticaly generate reset store
But in depth?
Enhance your redux modules:
- Automaticaly handling the start, loading, error or success, and reset Redux
phases of your async calls
- Four action types will be automaticaly created such as:REQUEST:SIGNUP:START: `USER.REQUEST.SIGNUP.START`SUCCESS: `USER.REQUEST.SIGNUP.SUCCESS`FAILED: `USER.REQUEST.SIGNUP.FAILED`RESET: `USER.REQUEST.SIGNUP.RESET`
- Two states will be automaticaly added such as:requests:LOGIN:loading: truefailed: false
- Two selectors corresponding to the state will be automaticaly generated such
as:stateuserrequestsLOGINloadingstateuserrequestsLOGINfailed
- Four action types will be automaticaly created such as:
- Adding a
RESET_STORE
action to your different stores re-initializing your stores to theirdefaultState
- An action type and action creator are generated:RESET_STORE: 'RESET_STORE';type: 'RESET_STORE' ;
- Your enhanced reducer will handle automaticaly your stores reset when dispatching the action
- An action type and action creator are generated:
Full example here
How to use?- In your redux module file(s) import the necessary enhancers:
;...
- Create two variables, a string for the name of your store, an array of string in caps for your async calls:
...const storeName = 'USER';const asyncActionsNames = 'SIGNUP';...
- Enhance your action types by passing the
storeName
andasyncActionsNames
:
...const actionTypes = ... LOGOUT: 'LOGOUT';...
- Enhance your action creators by passing the
storeName
,apiActionsNames
andactionTypes
:
...const actionCreators = ... type: actionTypesREQUESTSIGNUPSTART payload: signupInfo ;...
- Enhance your default state by passing the
asyncActionsNames
:
...const defaultState = ...;...
- Create your normal reducer and enhance it afterwards by passing the
storeName
:
...const basicReducer = { }; const reducer = ;...
- Enhance your selectors by passing the
storeName
andasyncActionsNames
:
...const selectors = ... stateusertoken;...
- Use your newly generated actions and state inside your app:
// In a container?const mapStateToProps = signupLoading: selectors signupFailed: selectors;const mapDispatchToProps = startSignup: actionCreatorsstartSignup resetSignup: actionCreatorsresetSignup; // With a saga for instance { try const email password nickname = actionpayload; const token = ; ; catch err ; }
Contributing
Development
- Create a fork (or branch if you are part of the team)
- Develop your changes
- Open a pull request and ask for a review
- Someone from the team will merge if the changes are accepted
Deployment
- Bump the version in the package.json and create a new commit
- Create a tag linked to the bump version commit:
git tag vX.Y.Z
- Check that your tag was added locally:
git tag -l
- Push your tag to Github:
git push origin vX.Y.Z
- Verify in Github that there is a new release, and add a release note
- Publish to NPM now:
npm publish
- Tada! After a few minutes, you will see the new version on NPM: https://www.npmjs.com/package/redux-async-actions-factory