redux 避免RTK查询中的pro-drilling查询参数

ukqbszuj  于 2023-06-23  发布在  其他
关注(0)|答案(1)|浏览(136)

在我的应用的根目录下,我创建了一个getUserQuery,它接受一个id并返回一个user对象。在我的应用程序的其余部分中,有大量的其他查询需要将用户的id作为传递给查询的参数之一。
我想我可以从apiSlice中选择user,以访问它的id,但只有当我知道查询(用户id)使用了什么参数时才能这样做,这就打败了选择用户来获取它的id的意义。
我知道我可以通过UI向下传递用户,但这太难看了。我也知道我可以用Context来做,但这又感觉不对。考虑到getUserQuery已经生成并缓存(我知道getUserQuery只会为单个用户生成),我觉得一定有更明智的方法来访问用户的id

6uxekuva

6uxekuva1#

Redux-Toolkit Query只是一个API缓存管理解决方案,除了已经进行了哪些查询以及它们的缓存结果是什么之外,真的没有“状态”的意义,例如。他们的元数据。
使用React上下文对我来说似乎足够明智,可以跟踪任何当前/活动/最近使用的“id”查询参数。
如果创建一个完整的React上下文感觉不对,你可以在Redux商店中存储“当前”id。使用查询的onQueryStarted属性分派一个操作来存储当前使用的“id”值。
示例:

import { createSlice } from '@reduxjs/toolkit';

const idSlice = createSlice({
  name: "id",
  initialState: null,
  reducers: {
    setId: (state, action) => action.payload,
  }
});

export { setId } = idSlice.actions;

export const idSelector = state => state.id;

export default idSlice.reducer;
import { createApi } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  ....,
  endpoints: builder => ({
    ...

    getUserQuery: builder.query({
      query: id => {....},
      onQueryStarted: async (id, { dispatch, queryFulfilled }) => {
        try {
          await queryFulfilled;
          dispatch(setId(id));
        } catch(error) {
          // Handle or ignore? Up to you.
        }
      },
    }),

    ...
  }),
});

在UI中,使用useSelector钩子和idSelector选择器函数来选择最近设置的“id”值。

const id = useSelector(idSelector);

相关问题