Question

我面临的一个问题是我似乎找不到我犯的错误。我基本上有一个简单的redux-thunk动作创建器，其中包含一些axios调用。我使用connect将组件连接到该动作创建者，然后在异步方法中调用它，该方法会传递给TouchablyOpacity onPress属性。

简化代码：

动作创建者：

export const createUploadEntry = (
    step,
    image,
    base64,
    width,
    height,
    submissionEntry
) => async (dispatch, getState) => {
    dispatch(createUploadEntryStart());

    try {
        const response = await axios.put(...);
        console.log("finished creating submission entry");
        dispatch(createUploadEntrySuccess(response.data));
    } catch (error) {
        ...
    }
}

Index.js

import { connect } from "react-redux";

import Component from "./component";
import { createUploadEntry } from "../../../../store/actions/trainings";

export default connect(
    null,
    { createUploadEntry }
)(Component);

Component.js

const Test = (props) => {
    const onPressed = async () => {
        console.log("start awaiting");
        await props.createUploadEntry(...);
        console.log("finished awaiting");
        props.navigateToNext();  
    }

    return <TouchableOpacity onPress={onPressed}>...</TouchableOpacity>
}

然后我在控制台中得到的输出是：

开始等待
等待中完成
完成创建提交条目

动作创建者需要上传图像，因此需要花费一些时间，并且在“开始等待”之后立即调用“完成等待”。

我希望我已经很好地描述了我的问题，并在此先感谢您的帮助！

欢呼

Answer 1

看看

export const createUploadEntry = (
    step,
    image,
    base64,
    width,
    height,
    submissionEntry
) => async (dispatch, getState) => {
    dispatch(createUploadEntryStart());

    try {
        const response = await axios.put(...);
        console.log("finished creating submission entry");
        dispatch(createUploadEntrySuccess(response.data));
        return response;
    } catch (error) {
        ...
    }
}

尝试这个return response;

Answer 2

尝试这样。

Index.js

import Component from "./component";

export default Component;

Component.js

import { connect } from "react-redux";
import { createUploadEntry } from "../../../../store/actions/trainings";

const Test = (props) => {
    const onPressed = async () => {
        console.log("start awaiting");
        await props.dispatch(createUploadEntry(...));
        console.log("finished awaiting");
        props.navigateToNext();  
    }

    return <TouchableOpacity onPress={onPressed}>...</TouchableOpacity>
}
export default connect()(Test);

Answer 3

发现这是另一种使redux-thunk陷入困境的中间件。

在TouchableOpacity的onPress上调用时，未正确等待Async Action-Creator

3 个答案: