reactjs 使用Redux-Toolkit RTK-Query进行条件提取

vi4fp9gy  于 2023-01-02  发布在  React
关注(0)|答案(1)|浏览(171)

我正在尝试从createAsuncThunks迁移到RTK查询。在页面加载时,我检查是否有没有用户在商店,然后从后端获取用户和其他数据。
这段代码可以很好地与createAsuncThunks,但它应该如何与RTK查询?

const InitApp = () => {
  const dispatch = useAppDispatch();
  const user = useAppSelector((state) => state.user);
  const ignore = useRef(false);

  useEffect(() => {
    if (!user && !ignore.current) {
      Promise.all([
        dispatch(getUser()),
         dispatch(getRawMedias()),
        dispatch(getFaces()),
        dispatch(getProjects()),
      ]);
    }

    return () => {
      ignore.current = true;
    };
  }, [dispatch, user]);

  if (!user) {
    return <Loader areaLoader />;
  }

  return <Outlet />;
};

我认为这种方法是错误的,但不清楚如何正确地做到这一点:

const {data} = useGetUserQuery()

  useEffect(() => {
    if (!data) {
      // can't call other hooks here
    }
  }, [data])
gajydyqb

gajydyqb1#

你可以传递skip参数,并将其与initalState组合,如下所示:

const user = useAppSelector((state) => state.user);
const { data = user } = useUserQuery(undefined, { skip: Boolean(user) });

现在,这将仅在没有用户时触发,如果有用户,数据将等于用户

相关问题