📜 ⬆️ ⬇️

How to make life Redux developer easier?

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

Your humble servant also experienced a lot of bathert suffering, while he worked the old-fashioned way, through switch → case, but I looked at the task a bit from the other side and led to the uniformity of this into a more convenient functional - object form of writing.

And so - after some time I ( master-7 ) and my colleague ( one-more ) tried to cope with this terrible frontend dream and created a very interesting Redux-Utils library.
')
Of course, we tried to write a comprehensible and exhaustive readme, but for the seed - a few examples in the article.

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

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 compared to writing the form:

 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, the killer feature number two - let's look at the creation of action games:

 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 many more interesting things you can find in the readme project! I hope this library will make your work easier.

Source: https://habr.com/ru/post/327244/


All Articles