無法在react-redux中的動作中調用另一個動作

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 method.How我能做到這一點？我如何將數據傳遞給labresult？

Answer 1

正確的方法是，您必須通過傳遞該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 
 
    }; 
 
}

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： ，如果你想從組件使用派遣將從Redux的使用connect（）函數來調用注入動作的創造者。

編輯配置終極版咚中間件

//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

Finally I got the solution:-

我的第一個動作會是這樣： -

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

現在從減速，我們將調用操作爲： -

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;