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.