Redux-dopomoga
redux-dopomoga
is a library that aims to reduce boilerplates.
Getting started
Install
$ npm install --save redux-dopomoga
or
$ yarn add redux-dopomoga
Usage Example
Creating constants:
import { createConstants } from 'redux-dopomoga/constants';
const productUpdateConstants = createConstants('PRODUCT_UPDATE');
It will creates object with 4 fields (REQUEST
, SUCCESS
, FAILURE
, CANCEL
). To get access to the constants use predefined library's constants:
import { REQUEST } from 'redux-dopomoga/constants';
const productUpdateRequestConstant = productUpdateConstants[REQUEST];
// productUpdateRequestConstant === 'PRODUCT_UPDATE_REQUEST'
Creating actions:
import { createActions } from 'redux-dopomoga/actions';
const productUpdateActions = createActions(productUpdateConstants);
To perform a specific type of action, call one of object property:
productUpdateActions.request(payload); // it will creates { type: 'PRODUCT_UPDATE_REQUEST', error: false, payload: payload }
productUpdateActions.success(payload); // it will creates { type: 'PRODUCT_UPDATE_SUCCESS', error: false, payload: payload }
productUpdateActions.failure(error); // it will creates { type: 'PRODUCT_UPDATE_FAILURE', error: error }. NOTE error should be instance of Error or `false`.
productUpdateActions.cancel(payload); // it will creates { type: 'PRODUCT_UPDATE_CANCEL', error: false, payload: payload }
Creating sagas:
MakeRequest
We are suing axios
to make XHR. To make request use makeRequest
.
import { makeRequest } from 'redux-dopomoga/sagas';
function* updateProduct(reduxAction) {
yield makeRequest({
url: '/api/product-update',
method: 'post',
action: reduxAction, // read note #1
paramsGetter: () => ({}), // read note #2
actions: productUpdateActions, // read note #3
types: productUpdateConstants, // read note #3
});
}
-
note #1
action: reduxAction
We needaction
to get default data for request. You can share an action from any place you want. -
note #2
paramsGetter: () => ({})
By defaultmakeRequest
usesaction.payload
asdata
for request, but if you want to add something you can useparamsGetter
. It could be regular function or another saga, result of the function will be mixed with request params in the following way{url: '...', method: '...', ...paramsGetterResult}
, therefore you have to explicitly setdata
in returned value ofparamsGetter
function. -
note #3
actions: productUpdateActions and types: productUpdateConstants
Using this actions and constants, we can control future behavior of saga and retrieve the response.
On the action success
of productUpdate
(productUpdateConstants[SUCCESS]
) we will get response.data
of our request.
function* someSaga() {
// ...
const action = yield take(productUpdateConstants[SUCCESS]);
// action === { type: 'PRODUCT_UPDATE_SUCCESS', payload: 'any server response', error: false }
}
In a similar way you can take an error via FAILURE
constant.
RequestHandlerSaga
This method uses makeRquest
and adds ability to cancel a request.
You can use it in you'r watcher saga.
export default function* moduleWatcherSaga() {
yield all([
fork(requestHandlerSaga, {
url: '/api/product-update',
method: 'post',
actions: productUpdateActions,
types: productUpdateConstants,
}),
]);
// and then just dispatch `productUpdateActions.request()` anywhere
}