Javascript 我应该在哪里调用API？（Thunks？，组件？）

我有一个关于React with Redux的问题，Redux的所有概念让我有点困惑，我看了一些教程或论文，其中在actions文件中为调用api加载的所有过程添加thunk函数，成功或失败，然后将结果保存在store中，我的问题是我什么时候必须这样做，还是只在我的组件中调用api？在我的componet中是否有一个良好的实践调用API

谢谢!

---

很抱歉，我的英语说得不太好，我希望他们已经理解了。

在react/redux中进行api调用时，您有两种选择。以下是我使用过的两种方法：

1.使用redux thunk调用所有正在运行的创建者：

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

这种方法很有效，没有什么问题。问题是你最终会写很多样板代码。这也意味着你的动作创造者不是纯粹的功能。纯动作通常更容易测试和推理

2.将操作用作包含相关api调用信息的命令以及随响应调用的成功处理程序。然后可以编写middlware，在一个地方处理所有api调用。这使得处理错误更加容易，并保持动作创建者的纯洁。这种方法的设置稍微多一些，但从长远来看是值得的

组件分派的操作创建者：

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

处理api调用的middlware：

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使用这种方法。我将链接到他关于它的谈话，无论你使用哪种方法，它都值得一看

在react/redux中进行api调用时，您有几个选项。以下是我使用过的两种方法：

1.使用redux thunk调用所有正在运行的创建者：

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

这种方法很有效，没有什么问题。问题是你最终会写很多样板代码。这也意味着你的动作创造者不是纯粹的功能。纯动作通常更容易测试和推理

2.将操作用作包含相关api调用信息的命令以及随响应调用的成功处理程序。然后可以编写middlware，在一个地方处理所有api调用。这使得处理错误更加容易，并保持动作创建者的纯洁。这种方法的设置稍微多一些，但从长远来看是值得的

组件分派的操作创建者：

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

处理api调用的middlware：

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使用这种方法。我将链接到他关于它的谈话，无论你使用哪种方法，它都值得一看

简短回答-不。。。所有ajax请求都应该在操作中完成…简短回答-否。。。所有ajax请求都应该在操作中完成。。。