redux-shortcut v0.2.3
redux-shortcut
Description
redux-shortcut
is an internal library, which intention is to unify and simplify the usage of redux and redux-saga, as well as reduce the amount of boilerplate code.
Justification
There are a few different things about redux
and saga
usage, that could be improved, if not for public usage, then at least for internal projects.
1. No boilerplate code
The main reason behind the library is to get rid of the boilerplate code and to hide it inside the library. Let's look at the following code:
export function fetchInitialData() {
return { type: Consts.ACTIONS.GLOBAL_FETCH_INITIAL_DATA };
}
export function updateInitialDataLocally(payload: *) {
return { type: Consts.ACTIONS.GLOBAL_UPDATE_INITIAL_DATA, payload };
}
export function* fetchInitialDataSaga(): Saga</* return type */ void> {
yield takeEvery(Consts.ACTIONS.GLOBAL_FETCH_INITIAL_DATA, fetchInitialDataHandler);
}
function* fetchInitialDataHandler(action: ActionType) {
// fetching data from the backend
//...
yield put(updateDataLocally({ backendData }));
}
Everything in this code except fetchInitialDataHandler
is boilerplate code, that does not contain any business logic. The idea of redux-shortcut
is to just define the saga, while everything else (an action creator, state reducer, saga constructor) will be automatically created.
2. Tagged update actions
When a saga handler calls a state update, it would be good to see in react debugger who called the update exactly. redux-shortcut
allows to tag the state update calls, and make the tag appear in the debugger. That, in turn, allows to easily identify where the update came from.
3. Better looking code
The code becomes prettier. Large switch (action.type) { ... }
and multiple .set(...), .setIn(...)
in all reducers will no longer be needed. Instead, there will be exactly one reducer for any branch, which will update the state with the new data using some sort of shallow comparison algorithm.
5 years ago