时间戳

首页 > 解决方案 > 请求后更新其他切片

redux-toolkit - 请求后更新其他切片

问题描述

使用RTK Query，如何使用获取功能来更新另一个切片的状态？

本质上，我试图让所有相关状态彼此相邻，因此在使用 查询数据后useLazyGetQuery，我想使用结果并将其存储在现有的切片状态中。

虽然像下面这样的东西适用于组件，但它会使整个代码变得混乱

  const [trigger, result, lastArg] = useLazyGetFiltersQuery();

  React.useEffect(() => {
    if (result.status === 'fulfilled' && result.isSuccess === true && result.isLoading === false) {
      dispatch(updateData(result.data.map((pg) => ({ label: pg, value: pg }))));
    }
  }, [dispatch, result, result.isLoading, result.isSuccess, result.status]);

我宁愿直接在createApi方法中设置一些逻辑，以便将结果数据从头开始存储在我想要的切片中。

谢谢

标签： redux-toolkitrtk-query

解决方案

一般来说，我建议不要从 RTK-Query 复制数据，除非你有充分的理由：你将不得不手写很多东西，这几乎违背了 RTK-Query 的目的，并且你会丢失自动缓存收集之类的东西未使用的缓存条目 - 从那时起，您必须自己做。
此外，该数据已经在 Redux 中。通常，当您可以避免时，您不应该在存储中复制数据。

也就是说，你当然可以做到。例如，在“Using extraReducers”身份验证示例中显示：

const slice = createSlice({
  name: 'auth',
  initialState: { user: null, token: null } as AuthState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addMatcher(
      api.endpoints.login.matchFulfilled,
      (state, { payload }) => {
        state.token = payload.token
        state.user = payload.user
      }
    )
  },
})

请记住：这是 Redux，一切都通过操作发生。您将永远不必将useEffect其写回状态。只需倾听减速器中的正确操作即可。

推荐阅读