Reactjs 重用Redux react异步请求操作创建者/还原器

因此，我有一个简单的异步请求操作创建者，用于请求和分派操作。我想对不同的请求重复使用相同的操作创建者，这样每个请求都有自己的状态。我将尝试展示一些代码，然后进行更多解释。这是我的动作创造者

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'));
        });
  }

}

我的减速机减速机请求：

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);
} 

问题：我想对不同的请求重新使用我的操作创建者。我怎么能

调用

makeRequest（'www.defaults.com'）

，它将以

defaults

调用

makeRequest（'www.updates.com'）

，它将以

updates

现在我唯一能解决这个问题的方法就是为每个请求编写自己的动作创建者和减速器——只是大量的复制粘贴——这感觉不对

---

如何重用action creator和reducer在我的组件中创建两个单独的

默认值

和

更新

实例？

您可以为每个操作添加reducer操作的前缀：

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_"),
});

然后在调用makerequests时使用名称空间

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

很酷，谢谢。它似乎在工作。我还是个新手。如果可能的话，你能告诉我吗。这是针对最佳实践的考虑，还是只是为了填补Redux/React中的一些空白而进行的某种黑客或变通方法？这是相当标准的。默认的

combineReducer

实用程序使所有子reducer函数都有机会响应给定的操作，因此如果在reducer结构中使用同一个reducer两次，它们需要某种方法来区分是否响应。另外，在我的Redux插件目录中，也列出了许多类似的action/reducer包装实用程序。我想已经有几个可以为你做很多这方面的工作了。