再利用Reduxの反応する非同期要求アクションの作成者/減速

Question

は、だから私はアクションをディスパッチする要求のためのaxiosとredux-thunkを使用して、この単純な非同期要求アクションの作成者を持っています。私は別の要求に対して同じアクションの作成者を再利用したい - ので、それぞれの要求は、自身の状態を持っているでしょう。私はいくつかのコードを表示しようとし、次に詳細を説明しようとします。ここに私の行動クリエイター

function responseOK(response){ 
    return { 
    type: RESPONSE_OK, 
    payload: response, 
    } 
} 

function loadingChangedStatus(isLoading) { 
    return { 
    type: IS_LOADING, 
    isLoading: isLoading, 
    } 
} 

function handleError(errorID){ 
    return { 
    type: HANDLE_ERROR, 
    errorID: errorID, 
    } 
} 



export function makeRequest(URL){ 

    return function(dispatch, getSate){ 

     dispatch(loadingChangedStatus(true)); 

     axios.get(URL) 
     .then(function(response){ 
      dispatch(loadingChangedStatus(false)); 
      dispatch(responseOK(response)); 

     }) 
     .catch(function (response) { 
      dispatch(loadingChangedStatus(false)); 
      dispatch(handleError('connection_error')); 
     }); 
    } 

} 

そして、私の減速reducerRequestです：

export default function(state = {isLoading:false, payload:false,errorID:false}, action){ 

    switch (action.type) { 

    case IS_LOADING: 
     return Object.assign({}, state, { 
     isLoading: action.isLoading, 
     }); 
     break; 

    case RESPONSE_OK: 
     return Object.assign({}, state, { 
      isLoading: state.isLoading, 
      payload: action.payload, 
     }); 
     break; 

    case HANDLE_ERROR: 
     return Object.assign({}, state, { 
      isLoading: state.isLoading, 
      payload: action.payload, 
      errorID:action.errorID, 
     }); 
     break; 

    default: 
     return state; 
    } 

} 

ここから私の問題

私はそうのような減速を組み合わせる：

import { combineReducers } from 'redux'; 
import Request from "./reducerRequest"; 

const rootReducer = combineReducers({ 
    // I WANT EACH OF THESE TO BE SEPARATE INSTANCE BUT USE THE SAME ACTION CREATOR/REDUCER 
    defaults: Request, 
    updates: Request, 
}); 

export default rootReducer; 

I n私のコンポーネント：

function mapStateToProps({defaults, updates}){ 
    return {defaults, updates} 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({ makeRequest}, dispatch); 
} 

問題：異なる要求に対して私のアクションクリエイターを再利用したい。どうすればよい

1. コールmakeRequest('www.defaults.com')と、私はこの問題を解決するために、画像はすべてのために書くことであろうことができる唯一の方法はそれがdefaults
2. コールmakeRequest('www.updates.com')で終わると、それは今updates

で終わりますコピーペーストするだけたくさん - - 右感じていない、独自のアクションの作成者と自分の減速を要求します。

アクション作成者とレデューサーを再利用して、コンポーネント内にdefaultsとupdatesという2つのインスタンスを作成するにはどうすればよいですか？

Answer 1

あなたは、アクションあたりの減速操作の前に付けることができます。

export default function(namespace) 
    return function(state = {isLoading:false, payload:false,errorID:false}, action){ 

    switch (action.type) { 

    case namespace + IS_LOADING: 
     return Object.assign({}, state, { 
     isLoading: action.isLoading, 
     }); 
     break; 

    case namespace + RESPONSE_OK: 
     return Object.assign({}, state, { 
      isLoading: state.isLoading, 
      payload: action.payload, 
     }); 
     break; 

    case namespace + HANDLE_ERROR: 
     return Object.assign({}, state, { 
      isLoading: state.isLoading, 
      payload: action.payload, 
      errorID:action.errorID, 
     }); 
     break; 

    default: 
     return state; 
    } 
} 
} 

、その後、名前空間に

function responseOK(namespace, response){ 
    return { 
    type: namespace + RESPONSE_OK, 
    payload: response, 
    } 
} 


const rootReducer = combineReducers({ 
    // I WANT EACH OF THESE TO BE SEPARATE INSTANCE BUT USE THE SAME ACTION CREATOR/REDUCER 
    defaults: Request("DEFAULTS_"), 
    updates: Request("UPDATES_"), 
}); 

を追加し、あなたはmakeが

call makeRequest('DEFAULTS_', 'www.defaults.com') and it ends up in defaults 
call makeRequest('UPDATES_', 'www.updates.com') and it ends up in updates 

を要求呼び出すときに名前空間を使用HTH