我应该在哪里调用API？ （Thunks？，Component吗？）

Question

我有一个关于Redux的React的问题，redux的所有概念让我感到困惑，我看过教程或论文，其中在action文件中为调用api加载，成功或失败的所有过程添加了thunk函数，然后保存结果存储，我的问题是什么时候必须执行此操作或仅在组件中调用api？在我的组件中调用API是一个好习惯吗？

谢谢！

对不起，我的英语说得不太好，希望他们能听懂。

Answer 1

当涉及到react / redux中的api调用时，您有两个选择。这是我用过的两个：

1。使用redux-thunk在Action Creator中进行所有调用：

const action = () => async dispatch => {
    try {
        const {data} = await axios.get('/endpoint');
        dispatch({type: DO_SOMETHING, payload: data})
    } catch (e) {
        handleError(e)
    }
}

此方法效果很好，没有任何问题。问题是您最终要编写很多样板代码。这也意味着您的动作创建者不是纯粹的功能。通常，纯动作更易于测试和推理。

2。将操作用作包含相关api调用信息和与响应一起调用的成功处理程序的命令。然后，您可以编写可在一个地方处理所有api调用的Middlware。这样可以更轻松地处理错误，并使动作创建者保持纯正。这种方法需要更多设置，但从长远来看还是值得的。

该组件分派的动作创建者：

const getSomthing = () => ({
    type: API,
    payload: {
        call: {
            url: "/endpoint",
            method: "get"
        },
        success: data => ({type: DO_SOMETHING, payload: data})
    }
});

可处理api调用的中间件软件：

const api = ({ dispatch, getState }) => next => async action => {
    if (action.type !== API) {
    return next(action);
    }
    const { call, success, failure } = action.payload;

    try {
        const { data } = await axios(call);
        if (success) {
            dispatch(success(data));
        }
    } catch (e) {
        handleError(e)
    }
};

然后您可以将此中间件应用于您的商店。

Boris Dinkevich使用这种方法。无论您使用哪种方法，我都将链接至他的讨论，这值得一看。 https://www.youtube.com/watch?v=Gjiu7Lgdg3s