Redux開発者の生活を楽にする方法は？

React + Redux（またはReactだけでなく）で常に作業している多くの人が、同じことを常に行っています。 元のバージョンでは、このタスクは単調で、アクションゲームとレデューサーの絶え間ない作成が含まれています。 さらに、いくつかの異常なケースを処理する必要がある場合、プレフィックス付きのアクションがゲームに含まれます。



あなたの謙虚な召使もまた、スイッチ→ケースを通して、いつものように働いている間に多くの苦しみを経験しましたが、私はタスクを少し異なって見て、より便利な機能的なオブジェクト形式の記録で均一性をもたらしました。



そして、しばらくしてから、私（ master-7 ）と同僚（ もう1人 ）は、フロントエンドのこの恐ろしい夢に対処しようとし、非常に興味深いRedux-Utilsライブラリを作成しました。



もちろん、私たちは包括的で包括的なreadmeを書き込もうとしましたが、シードのために-記事のいくつかの例です。



最も興味深い機能の1つは、減速機のオブジェクト作成です。

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 }) });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、コードはビューを書くよりもずっと読みやすくなっています。

 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; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、キラー機能ナンバー2-アクションの作成を見てみましょう：

 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()); } ); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、プロジェクトのreadmeにはもっと面白いものがたくさんあります！ このライブラリがあなたの仕事をより簡単にすることを願っています。