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

Question

我正在尝试从 web api call 加载数据，为此我添加了两个操作，一个用于调用 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 ？

Answer 1

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

Answer 2

案例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);

Answer 3

最后我得到了解决方案：-

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

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;

Answer 4

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

当您想要转到 Reducer 或通知 reducer 调度时，您返回一个带有类型的 Action 对象。 因此，您必须编写以下代码才能使其工作：

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