无法在 react-redux 的操作中调用另一个操作答案

【问题标题】：Not able to call another action inside a action in react-redux无法在 react-redux 的操作中调用另一个操作
【发布时间】：2017-05-17 03:58:31
【问题描述】：

我正在尝试从 web api 调用加载数据，为此我添加了两个操作，一个用于调用 webapi 方法，另一个用于加载数据。我的行为是这样的：-

export function LoadLabResult (labresult) {

  return (dispatch) => {
    dispatch({
      type: 'RECEIVE_LABRESULT',
    });

    fetch('http://localhost:8090/api/Requisition/GetRequisitionTestInfo', {mode: 'no-cors'})
  .then(response =>dispatch({
        type: 'REQUEST_LABRESULT',
        labresult:response.data
      }));

  }
};
export function receiveLabResult(labresult) {
console.log(labresult);
  return {
    type:'REQUEST_LABRESULT',
    labresult:labresult
  };
}

现在的问题是它没有调用 receiveLabResult 方法。我该怎么做？如何将数据传递给 labresult？

【问题讨论】：

据我了解，您想在 api 调用之前调度操作 'RECEIVE_LABRESULT'，然后在 api 调用完成后，调度操作 'REQUEST_LABRESULT'。对吗？
@swapnil 在调用 api 调用后我想触发 REQUEST_LABRESULT 但它没有使用正确的数据触发，我通过调试数据检查了是否以 json 的形式出现。如何将数据传递给其他操作和火？
我认为您使用的术语不正确。您创建的方法是动作创建者而不是动作。动作创建者触发动作。在您的情况下，我认为不需要在 loadLabResult 中调用 receiveLabResult 操作创建者。关于 api 调用数据，您是否尝试在各自的 reducer 中安慰 action.labresult ？

标签： reactjs ecmascript-6 react-redux es6-promise

【解决方案1】：

非常感谢你们 3 小时后我终于解决了我的问题。实际上，如果你想在你的函数中调用另一个动作函数，你必须在 dispatch() 函数中作为参数调用它。例如：dispatch(loadUser());

【讨论】：

【解决方案2】：

终于找到了解决办法：-

我的第一个动作是这样的：-

export  function LoadAllLabResult (selectedUserId) {
    return (dispatch) => {
    dispatch({
      type: REQUEST_LABRESULT,//defining the name of the action to identify in the reducer
    });

  fetch(APIPATH+'data/LoadTestInfo?patientVisitId='+selectedUserId)//calling the service
  .then((response) => response.json())
    .then((labresult) => dispatch(receiveLabResult(labresult)));//passing the data to other actions
  }
}

我的第二个动作会是这样的：-

 export  function receiveLabResult(labresult) {
      return {
        type:RECEIVE_LABRESULT,//defining the name of the action to identify in the reducer
        labresult:labresult//passing the data to reducer
      };
    }

现在从 Reducer 我们将这些动作称为：-

import {
  RECEIVE_LABRESULT,
  REQUEST_REQUISITION
} from '../../../Constant/actionType'
//define the initail state for the reducer
var initialState={
     labresult: [],
  loadinglabResult: true
}
//call the action to update the sate
 function labResultReducer(state =initialState, action) {
    switch (action.type) {
  case RECEIVE_LABRESULT:
        return Object.assign({}, state, {
          labresult: action.labresult,
          loadinglabResult: false,
        });
    case REQUEST_REQUISITION:
        return Object.assign({}, state, {
          loadinglabResult: true

        });

    default:
        return state;
    }
}
export default labResultReducer;

【讨论】：

【解决方案3】：

案例1：如果您尝试从另一个动作创建者调用动作创建者，您可以直接调用该动作作为函数调用。

export function LoadLabResult (labresult) {

  return (dispatch) => {
    dispatch(receiveLabResult());
  }
};
export function receiveLabResult(labresult) {
console.log(labresult);
  return {
    type:'REQUEST_LABRESULT',
    labresult:labresult
  };
}

案例2： 如果您尝试从组件调用动作创建者，请使用 dispatch 将使用 connect() 函数从 redux 注入。

编辑配置 redux thunk 中间件

//Middleware
const middleware = [
  thunk,
  promiseMiddleware()
];

// Apply all the middleware for Redux
const enhancers = composeEnhancers(
  applyMiddleware(...middleware)
);

// Create the Redux Store
const store = createStore(rootReducer, initialState, enhancers);

【讨论】：

@kahlid 执行上述代码错误为：未捕获的 TypeError: dispatch is not a function
我是这样写的：then(response =>dispatch(receiveLabResult(response.data)));但是错误来了，就像调度不是函数一样。
action creator里面的asyn action需要使用redux-thunk，配置redux-thunk作为中间件使用dispatch。
编辑了我的回复以配置 redux thunk 中间件
@KhalidAzam 你没有在这里展示两个动作创建者。 receiveLabResult 是一个动作，而不是动作创建者。动作创建者调度动作。

【解决方案4】：

正确的方法是您必须在 API 成功处理程序之后通过传递该 response.data 直接调用方法 receiveLabResult。

当你想去 Reducer 或通知 reducer 调度时，你返回一个带有 type 的 Action Object。所以你必须编写以下代码才能使其工作：

export function LoadLabResult (labresult) {

  return (dispatch) => {
    dispatch({
      type: 'RECEIVE_LABRESULT',
    });

    fetch('http://localhost:8090/api/Requisition/GetRequisitionTestInfo', {mode: 'no-cors'})
  .then(response =>dispatch(receiveLabResult(response.data));

  }
};
export function receiveLabResult(labresult) {
console.log(labresult);
  return {
    type:'REQUEST_LABRESULT',
    labresult:labresult
  };
}

【讨论】：