RTK Query中避免Prop Drilling：共享查询参数的有效策略

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

const idSlice = createSlice({
  name: "id",
  initialState: null, // 初始状态可以设置为null或默认值
  reducers: {
    setId: (state, action) => action.payload, // reducer用于接收并设置新的ID
  }
});

export const { setId } = idSlice.actions; // 导出action creator

export const idSelector = state => state.id; // 导出selector以便在组件中访问

export default idSlice.reducer; // 导出reducer供Redux store配置

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { setId } from './idSlice'; // 导入我们创建的setId action

export const apiSlice = createApi({
  reducerPath: 'api', // 定义API的reducer路径
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com/' }), // 你的基础URL
  endpoints: builder => ({
    getUserQuery: builder.query({
      query: id => `/users/${id}`, // 假设这是一个获取用户详情的API
      async onQueryStarted(id, { dispatch, queryFulfilled }) {
        try {
          // 等待查询成功完成
          await queryFulfilled;
          // 查询成功后，派发action将当前使用的ID存储到Redux store
          dispatch(setId(id));
        } catch(error) {
          // 处理或忽略查询失败的情况
          console.error("Failed to fetch user:", error);
        }
      },
    }),
    // 其他endpoints...
  }),
});

import React from 'react';
import { useSelector } from 'react-redux';
import { idSelector } from './idSlice'; // 导入idSelector
// 假设你已从apiSlice导出了useGetUserPostsQuery
// import { useGetUserPostsQuery } from './apiSlice'; 

function MyDependentComponent() {
  const currentUserId = useSelector(idSelector); // 从Redux store中获取当前用户ID

  // 现在你可以使用currentUserId来发起其他依赖于它的查询，
  // 或者在UI中展示相关信息。
  // 例如，如果你有另一个查询需要这个ID：
  // const { data: userPosts, isLoading: postsLoading } = useGetUserPostsQuery(currentUserId, {
  //   skip: !currentUserId, // 如果没有ID，则跳过查询
  // });

  if (!currentUserId) {
    return <div>请先选择一个用户...</div>;
  }

  return (
    <div>
      <h2>当前用户ID: {currentUserId}</h2>
      {/* 渲染依赖于currentUserId的内容 */}
      {/* {postsLoading && <div>加载用户帖子...</div>} */}
      {/* {userPosts && (
        <ul>
          {userPosts.map(post => <li key={post.id}>{post.title}</li>)}
        </ul>
      )} */}
    </div>
  );
}

export default MyDependentComponent;