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

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 将其写回状态。只需聆听 reducer 中的正确操作即可。