Question

我正在尝试从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 ？

Answer 1

三个小时后，非常感谢你们，我终于解决了我的问题。实际上，如果您要在函数中调用另一个动作函数，则必须在dispatch()函数内部将其作为参数进行调用。示例：dispatch(loadUser());

Answer 2

case1：如果你试图从另一个动作创建者那里调用动作创建者，你可以直接将该动作称为函数调用。

export function LoadLabResult (labresult) {

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

<强>情况2：如果你试图从组件使用调度中调用action creator，它将使用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

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

如果要转到Reducer，或者向reducer通知有关分派的信息，则返回一个带有类型的Action对象。因此，您必须编写以下代码才能使其正常工作：

＆＃13;

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

＆＃13;

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

4 个答案: