Clever Geek Handbook

Redux Action Creators。 定数と頭痛なし







みなさんこんにちは！ この記事は、Reduxで定数を使用するのにうんざりしている人に役立ちます（上記のプレビューに一部示されています）。 カットの下で、私は次の可能な自転車とその乗り方を示します。















モジュール+ドキュメント（ https://github.com/pavelivanov/redaction ）









はじめに



Reduxの使用は、アクションとレデューサー、および定数を意味します。これらは、タイプ（アクションタイプ）を渡すことでアクションをレデューサーに関連付けるために使用されます。







使用例： 







const ADD_TODO = 'ADD_TODO' export { ADD_TODO }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 import { ADD_TODO } from 'constants' export const addTODO = () => { return (dispatch) => { dispatch({ type: ADD_TODO, item }) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 const ADD_TODO = 'ADD_TODO' const initialState = { TODO: [] } export default (state = initialState, action) => { switch (action.type) { case 'ADD_TODO': return { ...state, TODO: [ ...state.TODO, action.TODO ] } default: return state } }


このアプローチには、定数の使用から始まり、アクションを呼び出す必要があるすべてのコンポーネントへのディスパッチメソッドの転送で終わる多くのマイナスがあります。







シンプルなレデューサー



リダクションでは、これらの問題を取り除きました。 必要なのは、アクションを作成して使用することだけです。 それだけです







Redactionを使用した同じコード（上記）の例： 







 import { createAction } from 'redaction' export const initialState = { TODO: [] } export const addTODO = createAction((state, payload) => { return { ...state, TODO: [ ...state.TODO, payload ] } })


基本的な違い：初期状態を転送するために、ファイルからエクスポートが行われます。







リクエストアクション



リクエストアクションゲームに関して、 Redactionは多くの砂糖を提供しています。 使用例：







アクションを作成します。 







 // actions/users.js import { createAction } from 'redaction' export const getFeed = createAction({ endpoint: '/api/users/me/posts', method: 'GET' })


作成されたアクションを呼び出します。 







 // containers/Users/Feed.js import actions from 'core/actions' actions.users.getFeed({ subset: 'posts' })


状態でgetFeedを呼び出した結果は次のようになります。 







 { users: { posts: { pending: false, data: RESPONSE_BODY, error: null } } }


createActionと、実行の結果として返されるメソッドが同じパラメーターを取ること、つまり、 サブセットをcreateActionで指定し、別の場所で呼び出されたときにオーバーライドすることもできます。







各サブセットには3つの状態があります。







1）リクエストの開始{保留：true、データ：null、エラー：null}

2）リクエストが完了しました{保留：​​false、データ：RESPONSE_BODY、エラー：null}

3）要求がエラー{pending：false、data：null、error：RESPONSE_ERROR}で完了しました







レデューサーから必要なケースを処理するために、3つの異なるタイプの3つのアクションを作成することを心配する必要がなくなりました。







createActionの詳細



内部で要求を送信するには 、 スーパーエージェントが使用されます。 オプションのcreateActionは、スーパーエージェントで使用されるほぼすべてのパラメーターを受け入れます。







主なオプション：







params <オブジェクト>



オプションの任意のキーを関数にすることができます。この場合、この関数の引数の1つはparamsオブジェクトになります。 例外はonResponseとonErrorです







エンドポイント<String | 機能>



リクエストURL。

paramsの使用例： 







 export const getFeed = createAction({ endpoint: ({ userId }) => `/api/users/${userId}/posts`, method: 'GET' }) getFeed({ params: { userId: 100 } })


サブセット<String | 機能>



データが状態で保存されるキーの名前。 フルパスがスキームに従って構築されることを考慮する価値があります：FILE NAME.subset







modifyResponse <関数>



サーバーからの応答を編集するためのハンドラー。 サーバーからのResponseオブジェクトとparamsの2つの引数を取ります。 新しいデータオブジェクトが返されるまで待機します。 この場合、response.bodyを返す必要があります







modifyState <関数>



状態を直接変更するためのハンドラー。 Stateオブジェクト全体とパラメーターという2つの引数を取ります。 単一のアクションを使用する場合、リポジトリの個々の部分を変更すると便利な場合があります。 注意して使用してください！







onResponse <関数>



リクエストが成功したときに呼び出されるハンドラーは、1つの引数（サーバーからのResponseオブジェクト）を取ります







onError <関数>



要求が失敗したときに呼び出されるハンドラーは、サーバーからのエラーオブジェクトと応答オブジェクトの2つの引数を取ります







リダクションの初期化プロセス



初期化プロセスをロシア語で書かないことにしました。これはすべてリポジトリページのドキュメントにありますが、必要な人が十分にいる場合は、そのような説明を追加して記事を拡張できます。







おわりに



私のモジュールが有用であれば私はうれしいです。 機能を拡張するための質問、コメント、提案を受け付けています。 モジュールのソースコードはGitHubリポジトリで入手できます。









UPD1：モジュールの名前をRedAction （ https://github.com/pavelivanov/redaction ）に変更しました







More articles:


All Articles