Source:  Twitter logo

I am trying to load the data from web api call , for this i have added two action one for calling the webapi method another for loading the data. My actions are like this:-

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

Now the issue is that it is not calling the receiveLabResult method.How can I do this? How can I pass the data to labresult?

Thank you guys so much after 3 hours I finally solved my problem. Actually if you want to call another action function in your function you must call it inside the dispatch() function as a parameter. example: dispatch(loadUser());

7 users liked answer #0dislike answer #07
AdibTE profile pic
AdibTE

case1: if you trying to call the action creator from another action creator, yo can call that action directly as a function call.

export function LoadLabResult (labresult) {

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

case2: if you trying to call action creator from component use dispatch which will be injected from redux using connect() function.

Edited to configure redux thunk middleware

//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);
3 users liked answer #1dislike answer #13
Khalid Azam profile pic
Khalid Azam

Finally I got the solution:-

My first Action will be Like this:-

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

My second action will be like this:-

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

Now from Reducer we will call the actions as:-

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;
0 users liked answer #2dislike answer #20
Gorakh Nath profile pic
Gorakh Nath

The correct way is that you have to call the method receiveLabResult directly after the API success handler by passing that response.data.

You return an Action Object with type when you want to go to the Reducer or notify the reducer about the dispatch. So you have to write the following code to make it work:

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
  };
}
-1 users liked answer #3dislike answer #3-1
Rahat Khanna profile pic
Rahat Khanna

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).