请求后更新其他切片

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 中。通常，在可以避免的情况下，您不应在商店中复制数据。

也就是说，你当然可以做到。比如显示在the "Using extraReducers" authentication example:

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 将其写回状态。只听你的减速器中的正确动作。

请求后更新其他切片

Update other slice after request

redux-toolkit

rtk-query