如果已经获取数据，如何防止在 Redux 工具包中加载状态

Question

如果数据已被获取，我想停止显示加载状态，例如，如果用户访问个人资料页面，并移动到另一个页面，如果用户 returns 到个人资料，则说 Dashboard home页面，我不想再次显示加载状态。

这就是我获取数据的方式

 const { status, data } = useSelector((state) => state.profile);

  useEffect(() => {
    dispatch(fetchProfile());
  }, [dispatch]);

如果 status === loading，我显示加载程序，如果 fulfilled，我显示 data

减速机

 builder.addCase(fetchProfile.fulfilled, (state, { payload }) => {
      state.profile.status = 'fulfilled';
      state.profile.data = payload.data;
    });

    builder.addCase(fetchProfile.pending, (state) => {
      state.profile.status = 'loading';
    });

    builder.addCase(fetchProfile.rejected, (state) => {
      state.profile.status = 'error';
    });

Answer 1

您可以通过在调用 API 之前检查数据或检查数据是否已处于 API 待处理状态

来实现它

方法一 调用前检查数据API

只调用API一次（此方法API不会再调用，不会刷新数据）

  const { status, data } = useSelector((state) => state.profile);

  useEffect(() => {
   if(!data) { //You can additionally check `data.userId` if needed
     dispatch(fetchProfile());
   } 
  }, [dispatch]);

方法二 正在检查数据是否已经处于 API 待定状态

在该方法中，数据将在后台更新而不显示加载

检查数据是否已经存在或不处于挂起状态。

  builder.addCase(fetchProfile.pending, (state) => {
      state.profile.status =  state.profile.data ? 'loading' : 'Data is already loaded';
    });

如果已经获取数据，如何防止在 Redux 工具包中加载状态

How to prevent loading state in Redux toolkit if the data has already been fetched

reactjs

redux

react-redux

redux-toolkit