2

したがって、リクエストに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;

私のコンポーネントでは：

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との 2 つの個別のインスタンスを作成するにはどうすればよいですか?updates

4

1 に答える 1