Estoy tratando de cargar los datos de la llamada web api, para esto he agregado dos acciones, una para llamar al método webapi y otra para cargar los datos. Mis acciones son así:-
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 }; }Ahora el problema es que no está llamando al método receiveLabResult . ¿Cómo puedo hacer esto? ¿Cómo puedo pasar los datos a labresult ?
Muchas gracias, después de 3 horas finalmente resolví mi problema. En realidad, si desea llamar a otra función de acción en su función, debe llamarla dentro de la función dispatch() como parámetro . ejemplo: dispatch(loadUser());
case1: si intenta llamar al creador de la acción desde otro creador de acción, puede llamar a esa acción directamente como una llamada de función.
export function LoadLabResult (labresult) { return (dispatch) => { dispatch(receiveLabResult()); } }; export function receiveLabResult(labresult) { console.log(labresult); return { type:'REQUEST_LABRESULT', labresult:labresult }; }caso 2: si intenta llamar al creador de la acción desde el envío del componente, que se inyectará desde redux usando la función connect ().
Editado para configurar el middleware 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);Finalmente obtuve la solución: -
Mi primera acción será así: -
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 } }Mi segunda acción será así:-
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 }; }Ahora desde Reducer llamaremos a las acciones como:-
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;