Apollo Client 和 React Redux-Toolkit 状态管理应该如何？答案

【问题标题】：Apollo Client and React Redux-Toolkit how should state management be?Apollo Client 和 React Redux-Toolkit 状态管理应该如何？
【发布时间】：2021-07-18 15:29:50
【问题描述】：

我非常困惑。在真正的问题出现之前，让我告诉你我是如何开始的。也许我走错路了。所以你可以建议其他方式

我们在项目中不使用 graphql 进行登录和注册。注册包括 5 个阶段，我使用了 react redux-toolkit，因为我无法管理我的状态。我使用 axios 库进行登录和注册 api 调用。

我使用 redux 将模块拆分为切片。起初听起来很简单。我正在将 axios 返回的数据设置为相关切片的状态。

例如，在注册第一步之后，我将从 axios 得到的结果设置为 SignUpSlice 状态下的 firstStepData 键。然后我可以从其他步骤访问 firstStepData。

到目前为止，没问题。

用户登录后我们所有的 API 请求都是用 graphql 配置的。问题从这里开始。其实不是问题。我只是不知道该怎么做。

axios 支持 graphql，但用法并不是我想要的。所以我认为 apollo-client 会更适合我的项目。

我们以设置页面为例。

我的设置页面代码；

const GET_SETTINGS = gql`
  ...query
`;

const SettingsPage = () => {
  const { loading, error, data } = useQuery(GET_SETTINGS);

  if (loading) return 'Loading...';
  if (error) return `Error!`;

   return (
      <Settings>
         <Logo />
         <UpdateForm />
         <DeleteButton />
      </Settings>
   );
};

所以，我可以像 <Settings data={data}> 这样将数据传输到子组件，但是在嵌套组件中传输像这样的数据不是很累吗？或者如果我想从不属于设置页面的其他组件访问这些数据？如何将这些数据传输到子组件？

在这种情况下，我应该按照注册时的方式进行吗？是不是必须用 redux 创建 SettingsSlice，然后将 GET_SETTINGS 中的数据设置为 SettingsSlice 状态并从其他组件访问？

我的大脑着火了。

【问题讨论】：

标签： reactjs redux react-redux apollo-client react-apollo

【解决方案1】：

Apollo 是一个共享缓存。您可以在需要该数据的每个组件中执行useQuery(GET_SETTINGS); - 如果它已经在缓存中，则无需执行任何操作。否则它会得到它。

无需在 redux 中复制它 - apollo 现在是您的缓存状态管理器，而 redux 则用于所有其他数据。

【讨论】：