时间戳

首页 > 解决方案 > 如何在useEffect下使用RTK查询？

reactjs - 如何在useEffect下使用RTK查询？

问题描述

我有一种情况，我试图在用户登录时获取数据，我的结构是我有两个 redux 切片一个是 userData 另一个是 UserCartData 和

  1. 当用户登录时，如果登录成功，
  2. 然后我将数据发送到 UserData ，3，然后我写一个 useEffect 来检查是否有 userData ，
  3. 然后我将使用 UserData 获取 UserCartData

但问题是我无法在 useEffect 下让 useGetxxxQuery 工作，这是我的代码

const Login = () => {
  const user = useAppSelector(state=> state.auth);
  const dispatch = useAppDispatch();
  const [login] = useLoginMutation();
  const [showPassword,setShowPassword] = useState<boolean>(false);
  useEffect(() => {
    if (user!==null){ //fecth userCart data with userData
      const {data ,isLoading,isFetching }= useGetCartByIDQuery(user.user?._id!)
    }
  }, [dispatch])
  return (
    <Container>
      <Wrapper>
        <Title>SIGN IN</Title>
        <Formik
          initialValues={{ email: "", password: "" }}
          validationSchema={Yup.object({
            password: Yup.string()
              .min(8, 'Must be 8 characters or higher')
              .required(),
            email: Yup.string().email('Invalid email address').required(),
          })}
          onSubmit = {  async (values, actions) => {
                try{
                  const result = await login(values);
                  if("data" in result){
                    //console.log(result.data.data)
                    dispatch(setCredentials({user:result.data.data.findUser,token:result.data.data.cookie}))
                    
                  }else{
                    const err = (result.error as RequestError).data.message
                    if(err.includes("password")){
                      actions.setErrors({password:err})
                    }else if(err.includes("Facebook")){
                      actions.setErrors({email:err})
                    }
                  }
                }catch(err){
                  console.log(err)
                }             
          }}>
          //....unrelevant code

标签： reactjsreact-reduxrtk-query

解决方案

你不需要在useEffect这里，你可以简单地使用skipToken：

import {skipToken} from '@reduxjs/toolkit/query'

const {data, isLoading, isFetching } = useGetCartByIDQuery(user.user ? user.user._id : skipToken)

推荐阅读