Not able to call another action inside a action in react-redux

Question

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 ?

Answer 1

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());

Answer 2

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

Answer 3

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;

Answer 4

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