redux-async-generator
v1.0.0
Published
Redux async actions and reducers generator
Downloads
4
Maintainers
Readme
Redux Async Generator
redux-async-generator
is small library to generate common redux actions and reducers.
If you work with React and Redux, components that needs to load async data usually need to have actions that triggers the load, and others to indicate that async request succeeded or failed. You can leverage the boilerplate with redux-async-generator/async-data
.
Use redux-async-generator/async-form
to handle form fields in the redux store with state and validation separate from the component.
Getting started
Install
$ npm install --save redux-async-generator
or
$ yarn add redux-async-generator
Async Data
TL;DR;
When loading data from async source, define the actions and reducer files for handling the state of that load in redux.
component.actions.js
import { createActions } from 'redux-async-generator/async-data';
export const { requested, failed, succeeded, actions } = createActions('COMPONENT');
component.reducer.js
import { createReducer } from 'redux-async-generator/async-data';
import { actions } from './component.actions.js';
const defaultState = { data: [] }; // initial data
export default createReducer(defaultState, actions);
More info in async data readme
Form
TL;DR;
When creating a form, define the actions, reducer and validation files for managing the state and rules that apply in redux.
form.actions.js
import { createActions } from 'redux-async-generator/form';
export const { submitted, failed, succeeded, change, actions } = createActions('FORM');
form.reducer.js
import { createReducer } from 'redux-async-generator/form';
import { actions } from './form.actions.js';
const defaultData = {
username: '',
password: ''
};
function validate({ username, password }, submitted) {
return {
username: submitted && !username && 'The username is required',
password: submitted && !password && 'The password is required'
};
}
export default createReducer(defaultData, actions, validate);
More info in form readme