请求后更新其他切片

Question

使用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方法中设置一些逻辑，以便将结果数据从头存储在我想要的切片中。

谢谢

Answer 1

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

也就是说，你当然可以做到。例如， “使用 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其写回状态。只需聆听您的减速器中的正确操作即可。