npm install theodo-redux-routines
// or
yarn add theodo-redux-routines
With the actions / saga / reducer pattern :
- simply create a routine with a prefix string
// actions.js
import createRoutine from 'theodo-redux-routines'
export const fetchData = createRoutine('FETCH_DATA')
- use the routine REQUEST, SUCCESS and FAILURE constants in your reducer
// reducer.js
import { fetchData } from './actions'
export default (originalState = initialState, action {
switch (action.type) {
case fetchData.REQUEST:
return {
...state,
loading: true,
};
case fetchData.SUCCESS:
return {
...state,
data: action.payload,
};
case fetchData.FAILURE:
return {
...state,
error: action.error,
};
default:
return state;
}
}
- use the action creators in your saga to dispatch success / failure
// saga.js
import { fetchData } from './actions'
export function* fetchDataSaga() {
try {
let data = yield call( ... );
yield put(fetchData.success(data));
} catch (e) {
yield put(fetchData.failure(e));
}
}
export function* rootSaga() {
yield takeLatest(fetchData.REQUEST, fetchDataSaga);
}
- use the action creator request to trigger the saga from your component
// saga.js
import { fetchData } from './actions'
class MyComponent extends React.Component {
componentDidMount() {
this.props.dispatch(fetchData.request())
}
...
}
export default connect()(MyComponent)