2017-01-09 8 views
3

これはReactとReduxを初めて使用したので、これはベストプラクティスに関する質問です。React/Redux:APIレスポンスのデータを処理する場所とレデューサーからのアクションを送信する場所

私はAPI呼び出しを発射し、私の減速に対する応答をディスパッチアクションの作成者があります。私の減速で....

export function loadDrawSuccess(draw) { 
    return { type: ActionTypes.LOAD_DRAW_SUCCESS, draw}; 
} 

export function loadDraw() { 
    return function(dispatch) { 
    dispatch(beginAjaxCall()); 
    return drawApi.getDraw().then(draw => { 
     dispatch(loadDrawSuccess(draw)); 
    }).catch(() => { 
     dispatch(ajaxCallError()); 
    }); 
    }; 
} 

今、私は私が必要とするデータを抽出するために、応答を処理していますそれから.....

function extractNextOpenDraw(draws) { 
    if (!draws || typeof draws.content === 'undefined'){ 
    return {}; 
    } 
    let openDraws = draws.content.filter(draw => {return draw.status === 'open';}); 
    let sortedOpenDraws = openDraws.sort((draw1, draw2) => { 
    return DateHelper.getDateObjectFromUtcDateString(draw1.closeTimeUtc) - DateHelper.getDateObjectFromUtcDateString(draw2.closeTimeUtc); 
    }); 
    return sortedOpenDraws[0]; 
} 


export default function drawReducer(state = initialState.draw, action) { 

    switch (action.type) { 
    case types.LOAD_DRAW_SUCCESS: { 
     return objectAssign({}, extractNextOpenDraw(action.draw), {dateModified: action.dateModified}); 
    } 
    ........ 

    default: 
     return state; 
    } 
} 

私の質問は

  1. ある私は減速に応答を処理するために修正し、またはAMこれはAPIクラスまたはアクションクリエイターで処理する必要がありますか?
  2. APIがエラーなしで返されるが、応答フォーマットが期待されたフォーマットに準拠しない場合、私はajaxCallError()アクションをディスパッチしたいと思うでしょう。減速機内でこれを行うのは正しいですか?

答えて

3
  1. いいえ、減速機は、可能な限りクリーンであるとだけそれに役立った値でストアを更新する必要があります。アクション自体でレスポンスを解析するか、APIのラッパーを作成する必要があります。私は、アクションそのものを行うことで十分だと信じています。
  2. いいえ、そのようなエラーをすべて処理し、そこにディスパッチします。レデューサーはアクションをディスパッチできません。
+1

@kinnzaによると、還元剤はできるだけ清潔でなければならず、店舗は行動を起こすべきではありません。私があなたの場合、私はアクションとApiに分割され、アクションは通常、少なくとも3つの可能な方法があると付け加えます:処理中、処理済みOK、処理済みエラー。 –

関連する問題