时间戳

首页 > 解决方案 > 何时使用 Redux 从 api 调用中获取数据

reactjs - 何时使用 Redux 从 api 调用中获取数据

问题描述

我在我的项目中采用 Redux 进行状态控制，还采用 Axios 来获取 api。

但是我想知道什么时候应该通过 Redux 使用 API 调用来获取数据（在行动中），什么时候应该直接在组件中进行 api 调用。

是否取决于我是否需要将响应数据存储在 Redux 中（用于在不同组件之间共享）？我可以知道任何最佳实践吗？

通过 Redux 调用 API

export const fetchOptions = () => {
  return async (dispatch, getState) => {

    const request = await client.query({
      query: gqlQueries.getQuery,
    });
    const options = await request;


    dispatch({
      type: types.FETCH_DATA_END,
      options: options
    });
  }
}

直接在组件中调用API：

const axios = require("axios");

useEffect(() => {
    axios({
        url: 'http://localhost/graphql',
        method: 'post',
        data: {
        query: `
            query PostsForAuthor {
            author(id: 1) {
                firstName
                posts {
                    title
                    votes
                }
                }
            }
            `
        }
    }).then((result) => {
        console.log(result.data)
    });

}, []);

标签： reactjsredux

解决方案

如果多个组件使用相同的数据，redux 会在那里大放异彩。当您不希望显示任何陈旧的数据时，首选组件中的 API 调用，因此每次安装组件时都调用 api 并且您的数据始终与后端同步。可能还有其他一些标准，但这两个标准可以帮助我决定将状态保留在哪里。

推荐阅读