アクション作成者をアクションメソッドを持つクラスにすることができます

Question

通常、Redux（サンク）では、アクションクリエータは静的メソッドです。しかし、私は、アクション作成者が異なるエンドポイントに非同期呼び出しを行う必要がある特定のシナリオを持っています。これを行う方法の1つは、に行くためにどのエンドポイントを決定するためのフラグを渡すために、次のようになります。

function _getEndPoint(isHouse) { 
    return isHouse ? 'house' : 'flat'; 
} 

export function post(model, isHouse = false) { 
    return (dispatch, getState) => { 
    dispatch({ 
     types: [POST, POST_SUCCESS, POST_FAILED], 
     promise: (client) => client.post(`${_getEndPoint(isHouse)}`, { 
     data: model, 
     }), 
    }); 
    }; 
} 

しかし、クラスを作成する方法があるが、アクションメソッドとして機能し、パブリックメソッドとしてpostとPropertyを言います。したがって、Propertyクラスをインスタンス化するとき、プロパティのタイプを定義し、作成時に正しいエンドポイントを設定しますか？

C＃の背景から、この問題を解決するためにGenericsや継承のようなものを使用できるかどうかも疑問でした。

また、これは、Reduxがプログラミングの機能スタイルのほうにあることを読んで、クラスを使ってアクション・メソッドを作成しようとするのがよい方法です。

Answer 1

異なるエンドポイントにコールする（非同期でも非同期でも）必要がある場合、これらは異なるアクションです。エラーを処理したいとします。汎用タイプPOST_FAILEDは、どのリソースが失敗したかは教えてくれません。もしあなたがそれに基づいて状態ツリーを変更したいのであれば？異なるタイプをさまざまな方法で処理する必要がある場合はどうすればよいですか？機能的なアプローチPOST_OF_SOMETHING_FAILEDはここでよりよく適合します。小さな機能は小さな機能を果たします。それ以外の場合は、ブロックブロックを使用する必要があります。

クラスと継承を使用する代わりに、コードの重複を取り除くために何らかのアクションジェネレータを実装できます。たとえば、あなたが共有CRUDアクションを作成したい場合には、これはアクションは次のようになります作成方法です：

/actions/generators/create.js

import fetch from 'isomorphic-fetch'; 


function requestCreateItem(modelName) { 
    return { 
    type: `CREATE_${modelName.toUpperCase()}_REQUEST`, 
    }; 
} 

function receiveCreateItem(modelName, item) { 
    return { 
    type: `CREATE_${modelName.toUpperCase()}_SUCCESS`, 
    item, 
    receivedAt: Date.now(), 
    }; 
} 

function catchCreateItemError(modelName, error) { 
    return { 
    type: `CREATE_${modelName.toUpperCase()}_ERROR`, 
    error, 
    receivedAt: Date.now(), 
    }; 
} 

function createItem(modelName) { 
    return (dispatch) => { 
    dispatch(requestCreateItem(modelName)); 

    return fetch(`/${modelName}s`, { 
     method: 'POST', 
     credentials: 'same-origin', 
    }).then(response => response.json()).then(json => { 
     if (json.error) { 
     dispatch(catchCreateItemError(modelName, json.error)); 
     } else { 
     dispatch(receiveCreateItem(modelName, json)); 
     } 
    }).catch(error => { 
     dispatch(catchCreateItemError(modelName, error)); 
    }); 
    }; 
} 


export default function create(modelName) { 
    return() => createItem(modelName); 
} 

あなたはのように、内部にアクションのインデックスファイルを使用することができますコンストラクタ。

/actions/index.js

import create from './generators/create'; 
const createBot = create('bot'); 
export const botActions = { createBot }; 

これは主要なアイデアです。