未处理的拒绝(错误):动作必须是普通对象。使用自定义中间件进行异步操作。 React + Redux

时间:2019-12-19 14:29:16

标签: javascript reactjs asynchronous react-redux

//REDUX

export const clinicAdd = async (name, address, semester, pay) => (
    (dispatch) => { dispatch({ type: CLINIC_ADD});
         axios.post('myURL', 
         { name, address, semester, pay} ,config)
             .then( data => clinicAddSuccess(dispatch, data))
             .catch( () => clinicAddFail(dispatch));
    }
);

const clinicAddSuccess = async( dispatch , data) => {
    console.log("Success");
        dispatch({
            type: CLINIC_ADD_SUCCESS,
            payload: data,
            
        })
};
 
const clinicAddFail = async (dispatch) => {
    console.log("Fail");
    dispatch({
        type: CLINIC_ADD_FAIL
    })
};







//using 

   onPress = async(e) => {
        e.preventDefault();   
        const {name,address,payment,semester, error} = this.props;
        await this.props.clinicAdd(name,address,semester,payment);
        this.secondFun()
    };
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我正在尝试解决此问题。是我的新反应。 我希望在执行OnPress函数时,它会在临床添加结束之前等待,然后执行secondFunction

我在redux存储区中使用了applyMiddleware(thunk)

1 个答案:

答案 0 :(得分:1)

您的动作功能错误。应该是:

const clinicAdd = (name, address, semester, pay) => async dispatch => {
  await axios
    .post('myURL', { name, address, semester, pay }, config)
    .then(data => clinicAddSuccess(data))
    .catch(() => clinicAddFail());

  dispatch({ type: CLINIC_ADD });
};

const clinicAddSuccess = data => ({
    type: CLINIC_ADD_SUCCESS,
    payload: data, 
});

const clinicAddFail = () => ({
    type: CLINIC_ADD_FAIL
});