Reduxの：再利用可能なアクション

Question

私はそうのように見えるReduxのサンクを使用するアクション、持っている：

export function fetchData(query) { 
    return dispatch => { 
    return fetch(`http://myapi?query=${query}` ,{mode: 'cors'}) 
     .then(response => response.json()) 
     .then(json => { dispatch(someOtherAction(json)) }) 
    } 
    } 
} 

をして、私のsomeOtherActionが実際に状態を更新します。

export function someOtherAction(data) { 
    return { 
     action: types.SOME_ACTION, 
     data 
    } 
} 

しかし、私はそれをしたいですfetchDataアクションクリエーターを再利用できるようにして、アプリのさまざまな部分がmyapiからデータを取得し、それに基づいて状態の異なる部分を持つようにすることができます。

このアクションを再利用する最良の方法は何ですか？フェッチ成功に呼ばれて、それがどのアクションを規定している私のfetchDataアクションの作成者への2番目のパラメータを渡すことが可能です：

export function fetchData(query, nextAction) { 
    return dispatch => { 
    return fetch(`http://myapi?query=${query}` ,{mode: 'cors'}) 
     .then(response => response.json()) 
     .then(json => { dispatch(nextAction(json)) }) 
    } 
    } 
} 

するか、この種のものを行うための受け入れられた方法はありますか？

Answer 1

私はミドルウェアを使用しています。私はフェッチ呼び出しを定義しています。そして、私のアクションでは、フェッチするURLと完了時にディスパッチするアクションを送信します。これは典型的なアクションをフェッチ次のようになります。そのアクションを呼び出すとき

const POSTS_LOAD = 'myapp/POST_L'; 
const POST_SUCCESS = 'myapp/POST_S'; 
const POST_FAIL = 'myapp/POST_F'; 

export function fetchLatestPosts(page) { 
    return { 
    actions: [POSTS_LOAD, POST_SUCCESS, POST_FAIL], 
    promise: { 
     url: '/some/path/to/posts', 
     params: { ... }, 
     headers: { ... }, 
    }, 
    }; 
} 

、POST_LOADアクションはちょうどそれが実行されますフェッチ要求の前にミドルウェアによって自動的にディスパッチされます。すべてがうまくいけば、POST_SUCCESSアクションがjsonレスポンスでディスパッチされます。何か問題が生じた場合は、POST_FAILアクションがミドルウェアによってディスパッチされます。

すべての魔法はミドルウェアにあります！

export default function fetchMiddleware() { 
    return ({ dispatch, getState }) => { 
    return next => action => { 
     if (typeof action === 'function') { 
     return action(dispatch, getState); 
     } 

     const { promise, actions, ...rest } = action; 

     if (!promise) { 
     return next(action); 
     } 

     const [REQUEST, SUCCESS, FAILURE] = actions; 
     next({ ...rest, type: REQUEST }); // <-- dispatch the LOAD action 


     const actionPromise = fetch(promise.url, promise); // <-- Make sure to add the domain 

     actionPromise 
     .then(response => response.json()) 
     .then(json => next({ ...rest, json, type: SUCCESS })) // <-- Dispatch the success action 
     .catch(error => next({ ...rest, error, type: FAILURE })); // <-- Dispatch the failure action 

     return actionPromise; 
    }; 
    }; 
} 

私は、単一の場所にすべての私の要求を持っていると私はそれが終了の要求後に実行するアクションを定義することができますこの方法：そしてそれは、これに似たようなのです。

------------ EDIT ----------------

減速上のデータを取得するためには、あなた元のアクション作成者に定義したアクション名を使用する必要があります。次の例は、アクションをミドルウェアから処理してpostsデータをjsonレスポンスから取得する方法を示しています。

export function reducer(state = {}, action) { 
    switch(action.type) { 
    case POST_SUCCESS: // <-- Action name 
     return { 
     ...state, 
     posts: action.json.posts, // <-- Getting the data from the action 
     } 
    default: 
     return state; 
    } 
} 

私はこれが役立つことを望みます。