無法在 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 }; }