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