How to make the life of a Redux developer easier?

Surely many of you who are constantly working with React + Redux (and maybe not only with React) are constantly doing many of the same things. In the original version, this task is monotonous and includes the constant creation of action games and reducers. Moreover, if you have to work with some extraordinary cases, action with prefixes is included in the game.

Your humble servant also experienced a lot of suffering butherts while working the old fashioned way, through switch → case, but I looked at the task a bit from the other side and led to uniformity in a more convenient functional - object form of recording.

And so - after some time, I ( master-7 ) and my colleague ( one-more) tried to cope with this terrible dream of the front-end and created a very interesting Redux-Utils library .

Of course, we tried to write a generally understandable and comprehensive readme, but for the seed - a few examples in the article.

One of the most interesting features is the object creation of reducers.

import {Reducer} from 'redux-util'
import {UserState} from 'types/UserState'
import {
    GET_USER_DATA_REQUEST,
    GET_USER_DATA_SUCCESS,
    GET_USER_DATA_FAIL
} from 'services/actionTypes'
const initialState: UserState = [];
export default Reducer(initialState, {
    [GET_USER_DATA_REQUEST]: () => null,
    [GET_USER_DATA_SUCCESS]: (state, action) => ({
        ...state,
        data: action.users
    }),
    [GET_USER_DATA_FAIL]: (state, action) => ({
        ...state,
        error: action.error
    })
});

As you can see, the code has become much more readable than writing a view:

import {Reducer} from 'redux-util'
import {UserState} from 'types/UserState'
import {
    GET_USER_DATA_REQUEST,
    GET_USER_DATA_SUCCESS,
    GET_USER_DATA_FAIL
} from 'services/actionTypes'
const initialState: UserState = [];
export default function Reducer(state = initialState, action) => {
    switch (action.type) {
      case GET_USER_DATA_REQUEST:
        return null;
      case GET_USER_DATA_REQUEST: 
        return {
        ...state,
        data: action.users
      };
      case GET_USER_DATA_FAIL: 
        return {
        ...state,
        error: action.error
      };
      default:
        return state;
}

Well, killer feature number two - let's look at the creation of actions:

import {buildGenericActionCreator} from 'redux-util'
const START_LOADING = 'START_LOADING';
const END_LOADING = 'END_LOADING';
export const startLoadingActionCreator = buildGenericActionCreator(START_LOADING);
export const endLoadingActionCreator = buildGenericActionCreator(END_LOADING);
// ....
import {startLoadingActionCreator, endLoadingActionCreator} from 'loading-reducer'
const PREFIX = 'PREFIX';
const startLoading = startLoadingActionCreator(PREFIX);
const endLoading = endLoadingActionCreator(PREFIX);
export const loadUser = () => (dispatch: Dispatch) => {
    dispatch(startLoading());
    return api.fetchUser().then(
        response => {
            dispatch(
                loadUserDataAction(response)
            );
            dispatch(endLoading());
        }
    );
};

And you can find many more interesting things in the readme of the project! I hope this library will make your work easier.