useEffect下如何使用RTK查询？

Question

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

当用户登录时，如果登录成功，
然后我会将数据分派到 UserData 中， 3，然后我写一个useEffect来检查是否有userData，
然后我将使用 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

Answer 1

您不能在其他钩子中使用钩子。这是一个规则！！！
来源：https://reactjs.org/docs/hooks-rules.html
除了这个你可以改变 useGetCartByIDQuery 钩子并只使用那里的一个函数：ex : const { startFetch } = useGetCartByIDQuery

useEffect(() => {
  startFetch('your arguments')
}, [])

Answer 2

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

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

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

useEffect下如何使用RTK查询？

How to use RTK query under useEffect?

reactjs

react-redux

rtk-query