Apollo客户端和React Redux工具包应该如何进行状态管理



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

在我们的项目中,我们不使用graphql进行登录和注册。注册由5个阶段组成,我使用了react redux工具包,因为我在管理自己的状态时遇到了问题。我使用axios库进行登录和注册api调用。

我用redux把模块分成片。一开始听起来很简单。我将axios返回的数据设置为相关切片的状态。

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

到目前为止,没有问题。

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

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

让我们以设置页面为例。

我的设置页面代码;

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状态并从其他组件访问?

我的脑子着火了。

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

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

最新更新