Невозможно вызвать другое действие внутри действия в реакции-редукторе

Question

Я пытаюсь загрузить данные из веб-авио-вызова, для этого я добавил два действия для вызова метода 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

Правильный способ заключается в том, что вы должны вызвать метод receiveLabResult непосредственно после обработчика успеха API, передав этот файл response.data.

Вы возвращаете объект действия с типом, когда хотите перейти к редуктору или сообщить редуктору о отправке. Таким образом, вы должны написать следующий код, чтобы сделать его работу:

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

case1: если вы пытаетесь вызвать создатель действий от другого действия создателя, то вы можете назвать это действие непосредственно в качестве функции вызов.

export function LoadLabResult (labresult) { 

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

Вариант 2: если вы пытаетесь вызвать действия создателя из компонента использования отправки, который будет впрыскиваемого из Redux, используя функцию подключения().

Edited настроить перевождь санк промежуточного

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

Теперь из 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;