// 简易示例
import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducers'

// 调用configureStore默认使用了
// 1. redux-thunk中间件来支持异步action，
// 2. redux-devtools-extension来支持ReduxDevTools浏览器扩展，
// 3. redux-immutable-state-invariant来检测state的不可变性。
const store = configureStore({
  reducer: rootReducer
})

export default store

// 完整示例
// store.ts文件
/* 
  以下代码完成了下列功能
  - slice reducers被自动传递给了combineReducers()函数
  - redux-thunk和redux-logger被添加为中间件
  - Redux DevTools扩展在生产环境中被禁用
  - 中间件、批量订阅和devtools增强器被组合在一起
*/

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
// redux-logger在此仅作为一个示例中间件来演示（记录Redux store中的每个action和state的变化）
import logger from 'redux-logger'
// redux-batched-subscribe在此仅作为一个示例增强器来演示（提高应用程序的性能和响应速度）
import { batchedSubscribe } from 'redux-batched-subscribe'
// 引入两个上面写好的reducer
import todosReducer from './todos/todosReducer'
import visibilityReducer from './visibility/visibilityReducer'

// 因为使用了rtk的configureStore，所以不需要另外合并combineReducers了
const reducer = {
  todos: todosReducer,
  visibility: visibilityReducer,
}

// getDefaultMiddleware函数返回一个包含默认中间件列表的数组,可以用于添加自定义middleware，同时仍然保留默认middlewar
// 官网不推荐使用数组展开运算符const middleware = [...getDefaultMiddleware(), customMiddleware]，请使用concat
// 扩展运算符可能都会导致ts丢失类型
const middleware = (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)

// 更加灵活的自定义默认中间件,了解
// const middleware = (getDefaultMiddleware) =>
//     getDefaultMiddleware({
//       thunk: {
//         extraArgument: myCustomApiService,  // extraArgument 属性指定了一个自定义的 API 服务，它将作为第三个参数传递给 action creator
//       },
//       serializableCheck: false, // 关闭serializableCheck中间件
//     }),

// 定义初始状态
const preloadedState = {
  todos: [
    { text: 'Eat food', completed: true, },
    { text: 'Exercise', completed: false, },
  ],
  visibilityFilter: 'SHOW_COMPLETED',
}

const debounceNotify = _.debounce((notify) => notify())

const store = configureStore({
  reducer,      // reducer是必需的，它指定了应用程序的根reducer
  middleware,      // 中间件，用于处理action。如果多个中间件也可以用数组表示
  devTools: process.env.NODE_ENV !== 'production',      // 是否启用Redux DevTools
  preloadedState,       // 对象，它包含应用程序的初始状态
  enhancers: [batchedSubscribe(debounceNotify)],        // 应用程序的增强器
})

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { GlobalState } from "@/store/interface";
import type { RootState } from "@/store";

// 定义初始化的state
const initialState: GlobalState = {
	token: "",
	userInfo: ""
}

/* 
	Redux 要求我们通过创建数据副本和更新数据副本，来实现不可变地写入所有状态更新。
	不过 Redux Toolkit createSlice 和 createReducer 
	在内部使用 Immer 允许我们编写“可变”的更新逻辑，变成正确的不可变更新。
*/
const globalSlice = createSlice({
	name: 'global',
	initialState,
	/* 
		createSlice 实际上是一个包装器，它使用 createReducer 来生成 reducer 函数，
		这里直接传入reducers对象，就相当于在包装器里调用了createReducer
	*/
	reducers: {
		setToken(state, action: PayloadAction<GlobalState['token']>) {
			// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
			// 并不是真正的改变状态值，因为它使用了 Immer 库
			// 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
			// 不可变的状态
			state.token = action.payload;
		},
		// 如果我们需要对dispatch 传来的数据 进行标准化处理，可以用以下写法并传入prepare函数
		// prepare函数首先接受dispatch 的负载(payload)并处理，然后才会传递给reducer。
		// prepare函数作用如其名，是等于对负载做预处理
		setUserInfo:{
			reducer(state,action){
  			state.userInfo = action.payload
			},
			// prepare函数会接受dispatch 参数，并在处理完后把这个负载传递给reducer
      prepare(userInfo) {
        return {
          payload: { 
						name:userInfo.name.trim(),
						address:userInfo.substring(0,10),
						vip:false
					}
        }
      }
		},
		setUserInfo(state, action: PayloadAction<GlobalState['userInfo']>) {
			state.userInfo = action.payload
		},
	}
})

// 导出 slice 中生成的 Redux action creators 和 reducer 函数（被Redux使用来更新state）。
// 每个 case reducer 函数会生成对应的 Action creators,这里就不用单独写action文件来管理action
export const { setToken, setUserInfo } = globalSlice.actions;

// 类比vuex getters,
export const selectToken = (state: RootState) => { state.global.token }

export default globalSlice.reducer;

// fetchTodos.pending：todos/fetchTodos/pending
// fetchTodos.fulfilled：todos/fetchTodos/fulfilled
// fetchTodos.rejected：todos/fetchTodos/rejected
export const fetchTodos = createAsyncThunk('todos/fetchTodos', async (_,{getState，dispatch}) => {
  const response = await client.get('/fakeApi/todos')
  return response.todos
})

// 接口，用于描述一个序列化的错误对象。它包含了错误的名称、消息、代码和堆栈信息。
interface SerializedError {
  name?: string
  message?: string
  code?: string
  stack?: string
}
// 接口，用于描述一个异步操作的“等待中”状态。它包含了action的type、payload和meta(其中包括请求ID和操作参数。)
interface PendingAction<ThunkArg> {
  type: string
  payload: undefined
  meta: {
    requestId: string
    arg: ThunkArg
  }
}
// 接口，用于描述一个异步操作的“已完成”状态。
interface FulfilledAction<ThunkArg, PromiseResult> {
  type: string
  payload: PromiseResult
  meta: {
    requestId: string
    arg: ThunkArg
  }
}
// 接口，用于描述一个异步操作的“已拒绝”状态。它包含了action的type、payload、error对象和meta(其中包括请求ID、操作参数、是否中止和条件。)
interface RejectedAction<ThunkArg> {
  type: string
  payload: undefined
  error: SerializedError | any
  meta: {
    requestId: string
    arg: ThunkArg
    aborted: boolean
    condition: boolean
  }
}
// 接口，用于描述一个异步操作的“已拒绝”状态，并且提供了一个拒绝值。它包含了action的type、payload、error对象和meta(其中包括请求ID、操作参数和是否中止。)
interface RejectedWithValueAction<ThunkArg, RejectedValue> {
  type: string
  payload: RejectedValue
  error: { message: 'Rejected' }
  meta: {
    requestId: string
    arg: ThunkArg
    aborted: boolean
  }
}
// 类型别名，用于描述一个函数，该函数接受请求ID和操作参数，并返回一个“等待中”状态的操作对象。
type Pending = <ThunkArg>(
  requestId: string,
  arg: ThunkArg
) => PendingAction<ThunkArg>
// 类型别名，用于描述一个函数，该函数接受异步操作的结果、请求ID和操作参数，并返回一个“已完成”状态的操作对象。
type Fulfilled = <ThunkArg, PromiseResult>(
  payload: PromiseResult,
  requestId: string,
  arg: ThunkArg
) => FulfilledAction<ThunkArg, PromiseResult>
// 类型别名，用于描述一个函数，该函数接受请求ID和操作参数，并返回一个“已拒绝”状态的操作对象。
type Rejected = <ThunkArg>(
  requestId: string,
  arg: ThunkArg
) => RejectedAction<ThunkArg>
// 类型别名，用于描述一个函数，该函数接受请求ID、操作参数和拒绝值，并返回一个“已拒绝”状态的操作对象。 
type RejectedWithValue = <ThunkArg, RejectedValue>(
  requestId: string,
  arg: ThunkArg
) => RejectedWithValueAction<ThunkArg, RejectedValue>

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await client.get('/fakeApi/posts')
  return response.data
})

const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    // omit existing reducers here
  },
  extraReducers(builder) {
    builder
      .addCase(fetchPosts.pending, (state, action) => {
        state.status = 'loading'
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded'
        state.posts = state.posts.concat(action.payload)
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed'
        state.error = action.error.message
      })
  }
})

// 组件中
const onClick = async () => {
  try {
    const originalPromiseResult = await dispatch(fetchUserById(userId)).unwrap()
    // 处理结果
  } catch (rejectedValueOrSerializedError) {
    // 处理错误
  }
}

// 使用rejectWithValue
const updateUser = createAsyncThunk(
  'users/update',
  async (userData, { rejectWithValue }) => {
    const { id, ...fields } = userData
    try {
      const response = await userAPI.updateById(id, fields)
      return response.data.user
    } catch (err) {
      // Use `err.response.data` as `action.payload` for a `rejected` action,
      // by explicitly returning it using the `rejectWithValue()` utility
      return rejectWithValue(err.response.data)
    }
  }
)

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId: number, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  },
	// createAsyncThunk第三个参数option
  {
		// condition 回调用于判断执行前是否需要取消
    // - condition回调 第一个参数是thunk传递的参数。
   	// - condition回调 第二个参数是是个对象，{getState, extra}
    condition: (userId, { getState, extra }) => {
      const { users } = getState()
      const fetchStatus = users.requests[userId]
      if (fetchStatus === 'fulfilled' || fetchStatus === 'loading') {
        // 已经fetch过或者loading中 , 不需要重新fetch
        return false
      }
    },
		// 配置项dispatchConditionRejection用于condition()return false的时候仍然dispatch 一个rejected的action
		dispatchConditionRejection:false

  }
)

function MyComponent(props: { userId: string }) {
  const dispatch = useAppDispatch()
  React.useEffect(() => {
    // Dispatching thunk 返回一个promise
    const promise = dispatch(fetchUserById(props.userId))
    return () => {
      // createAsyncThunk 返回的promise有个abort()方法
      promise.abort()
    }
  }, [props.userId])
}

const fetchUserById = createAsyncThunk(
  'users/fetchById',
  async (userId: string, thunkAPI) => {
    const response = await fetch(`https://reqres.in/api/users/${userId}`, {
      signal: thunkAPI.signal,
    })
    return await response.json()
  }
)

import { createAsyncThunk } from '@reduxjs/toolkit'

const readStream = createAsyncThunk(
  'readStream',
  async (stream: ReadableStream, { signal }) => {
    const reader = stream.getReader()

    let done = false
    let result = ''

    while (!done) {
      if (signal.aborted) {
        throw new Error('stop the work, this has been aborted!')
      }
      const read = await reader.read()
      result += read.value
      done = read.done
    }
    return result
  }
)

// 箭头函数，直接查找
const selectEntities = state => state.entities

// 函数声明，映射数组来派生值
function selectItemIds(state) {
  return state.items.map(item => item.id)
}

// 函数声明，封装深度查找
function selectSomeSpecificField(state) {
  return state.some.deeply.nested.field
}

// 箭头函数，从数组中派生值
const selectItemsWhoseNamesStartWith = (items, namePrefix) =>
  items.filter(item => item.name.startsWith(namePrefix))

// memoize缓存函数工作原理
function memoize(fn) {
  const cache = {};
  return function (...args) {
    const key = JSON. stringify(args) ;
    if (key in cache) {
    return cache [key];
    }
    cache [key] = fn(...args) ;
    return cache[key];
  }
}

// 如果需要给output selector 传递额外的参数，需要额外定义一个input selector 直接返回这个值
const selectItemsByCategory = createSelector(
  [
    // 通常的第一个输入 - 从 state 中提取值
    state => state.items,
    // 获取第二个参数，`category`，并转发到 output selector
    (state, category) => category
  ],
  // Output selector 拿到 (`items, category)` 参数
  (items, category) => items.filter(item => item.category === category)
)

// 这个新函数可以被多次调用，每次调用都会返回一个新的选择器函数，这些函数都可以独立地操作它们自己的 items 和 category 参数。因此，这个函数符合工厂函数的设计模式，它可以帮助我们更轻松地创建和管理对象。 
const makeSelectItemsByCategory = () => {
  const selectItemsByCategory = createSelector(
    [state => state.items, (state, category) => category],
    (items, category) => items.filter(item => item.category === category)
  )
  return selectItemsByCategory
}

import { selectTodoById } from './todosSlice'

function TodoListitem({ todoId }) {
  // 从作用域中捕获 `todoId`，获取 `state` 作为参数，并转发两者
  // 到实际的 Selector 函数来提取结果
  const todo = useSelector(state => selectTodoById(state, todoId))
}

import { makeSelectItemsByCategory } from './categoriesSlice'

function CategoryList({ category }) {
  // 在挂载时为每个组件实例创建一个新的记忆化 Selector
  const selectItemsByCategory = useMemo(makeSelectItemsByCategory, [])

  const itemsByCategory = useSelector(state =>
    selectItemsByCategory(state, category)
  )
}

// "整体式 Globalized" - 只接受state作为参数，作缓存
import { createSelector } from "reselect";
const selectUsers = state => state.users;
const selectActiveUser = createSelector(
  selectUsers,
  users => users.activeUser
);

// "局部式 Localized" - 接受多个参数，通常不做缓存
const selectUsersByEmail = (state, email) => {
  const { userList } = state.users;
  return userList.find(user => user.email === email);
};

// 例如，假设您具有以下用户实体：
{
  id: 'user-123',
  name: 'Alice',
  age: 32,
}
// 如果您的应用程序需要使用 id 属性来标识用户对象，那么您可以将以下函数用于 selectId：
const usersAdapter = createEntityAdapter({
  selectId: user => user.id,
});
// 例如，假设您的应用程序需要按年龄对用户进行排序：
const usersAdapter = createEntityAdapter({
  selectId: user => user.id,
  sortComparer: (a, b) => b.age - a.age,
});
// 例如，假设您的应用程序需要管理用户实体的状态：
const usersAdapter = createEntityAdapter({
  selectId: user => user.id,
  sortComparer: (a, b) => b.age - a.age,
  name: 'users',
});

import { createSlice, createEntityAdapter } from '@reduxjs/toolkit'

const todosAdapter = createEntityAdapter({
  selectId: todo => todo.id,
  sortComparer: (a, b) => a.priority - b.priority,
})

const todosSlice = createSlice({
  name: 'todos',
  initialState: todosAdapter.getInitialState(),
  reducers: {
    todoAdded: todosAdapter.addOne,
    todoRemoved: todosAdapter.removeOne,
    todoUpdated: todosAdapter.updateOne,
    todosReceived: todosAdapter.setAll,
  },
})

export const {
  selectAll: selectAllTodos,
  selectById: selectTodoById,
  selectIds: selectTodoIds,
} = todosAdapter.getSelectors(state => state.todos)

export const { todoAdded, todoRemoved, todoUpdated, todosReceived } = todosSlice.actions

export default todosSlice.reducer

// 从特定于 React 的入口点导入 RTK Query 方法
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// 定义我们的单个 API Slice 对象
export const apiSlice = createApi({
  // 缓存减速器预计将添加到 `state.api` （已经默认 - 这是可选的）
  reducerPath: 'api',
  // baseUrl 是 API 的起始 URL，而 prepareHeaders 函数则可以用来设置任意的 HTTP 请求头部信息
  baseQuery: fetchBaseQuery({ 
    baseUrl: '/fakeApi'，
    prepareHeaders: (headers, { getState }) => {
      const token = getState().auth.token;
      if (token) {
        headers.set('authorization', `Bearer ${token}`);
      }
      return headers;
    },
  }),
  // “endpoints” 代表对该服务器的操作和请求
  endpoints: builder => ({
    // `getPosts` endpoint 是一个返回数据的 “Query” 操作
    getPosts: builder.query({
      // 通过定义一个 query 选项来提供 URL 路径的剩余部分。请求的 URL 是“/fakeApi/posts”
      query: () => '/posts'
    }),
	  getPost: builder.query({
      query: postId => `/posts/${postId}`
    }),
    addNewPost: builder.mutation({
      query: initialPost => ({
        url: '/posts',
        method: 'POST',
        // 请求体参数
        body: initialPost
      })
    })
  })
})

// 这里我们的 query 选项返回一个包含 {url, method, body} 的对象。 由于我们使用 fetchBaseQuery 来发出请求，body 字段将自动为我们进行 JSON 序列化。

// 为 `getPosts` Query endpoint 导出自动生成的 hooks
export const { useGetPostsQuery, useGetPostQuery, useAddNewPostMutation } = apiSlice

// 为 `getUserInfo` Query endpoint 和 'postUserInfo' Mutation endpoint 导出自动生成的 hooks
// 若请求的查询接口是  getUserInfo,  则自动生成的hooks命名 `useGetUserInfoQuery`
// 若请求的是更新接口是 postUserInfo，则自动生成hooks命名`usePostUserInfoMutation`
export const { useGetUserInfoQuery,usePostUserInfoMutation } = apiSlice

// 配置
import postsReducer from '../features/posts/postsSlice'
import usersReducer from '../features/users/usersSlice'
import notificationsReducer from '../features/notifications/notificationsSlice'
import { apiSlice } from '../features/api/apiSlice'

export default configureStore({
  reducer: {
    posts: postsReducer,
    users: usersReducer,
    notifications: notificationsReducer,
    [apiSlice.reducerPath]: apiSlice.reducer
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(apiSlice.middleware)
})

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/fakeApi' }),
  endpoints: builder => ({
    getPosts: builder.query({
      query: () => '/posts'
    }),
    getPost: builder.query({
      query: postId => `/posts/${postId}`
    })
  })
})

export const { useGetPostsQuery, useGetPostQuery } = apiSlice

// omit setup
export const PostsList = () => {
  const {
    data: posts = [],
    isLoading,
    isSuccess,
    isError,
    error
  } = useGetPostsQuery()

  const sortedPosts = useMemo(() => {
    const sortedPosts = posts.slice()
    // Sort posts in descending chronological order
    sortedPosts.sort((a, b) => b.date.localeCompare(a.date))
    return sortedPosts
  }, [posts])

  let content

  if (isLoading) {
    content = <Spinner text="Loading..." />
  } else if (isSuccess) {
    content = sortedPosts.map(post => <PostExcerpt key={post.id} post={post} />)
  } else if (isError) {
    content = <div>{error.toString()}</div>
  }

  return (
    <section className="posts-list">
      <h2>Posts</h2>
      {content}
    </section>
  )
}

// omit setup
/* 
  RTK Query 为每个唯一的请求接口 + 参数组合创建一个 “cache key”，并分别存储每个 cache key 的结果。这意味着你可以多次使用同一个 Query hooks ，传递不同的查询参数，每个结果将单独缓存在 Redux 存储中。
  还需要注意的是查询参数必须是 单一 值！如果需要传递多个参数，则必须传递一个包含多个字段的对象（与createAsyncThunk完全相同）。 RTK Query 将对字段进行浅稳定比较，如果其中任何一个发生更改，则重新获取数据。
*/
export const SinglePostPage = ({ match }) => {
  const { postId } = match.params

  const { data: post, isFetching, isSuccess } = useGetPostQuery(postId)

  let content
  if (isFetching) {
    content = <Spinner text="Loading..." />
  } else if (isSuccess) {
    content = (
      <article className="post">
        <h2>{post.title}</h2>
        <div>
          <PostAuthor userId={post.user} />
          <TimeAgo timestamp={post.date} />
        </div>
        <p className="post-content">{post.content}</p>
        <ReactionButtons post={post} />
        <Link to={`/editPost/${post.id}`} className="button">
          Edit Post
        </Link>
      </article>
    )
  }

  return <section>{content}</section>
}

/* 
  这里我们的 query 选项返回一个包含 {url, method, body} 的对象。 
  由于我们使用 fetchBaseQuery 来发出请求，body 字段将自动为我们进行 JSON 序列化。
*/
export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/fakeApi' }),
  endpoints: builder => ({
    getPosts: builder.query({
      query: () => '/posts'
    }),
    getPost: builder.query({
      query: postId => `/posts/${postId}`
    }),
    addNewPost: builder.mutation({
      query: initialPost => ({
        url: '/posts',
        method: 'POST',
        // Include the entire post object as the body of the request
        body: initialPost
      })
    })
  })
})

export const {
  useGetPostsQuery,
  useGetPostQuery,
  useAddNewPostMutation
} = apiSlice

// omit setup
export const AddPostForm = () => {
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')
  const [userId, setUserId] = useState('')

  const [addNewPost, { isLoading }] = useAddNewPostMutation()
  const users = useSelector(selectAllUsers)

  const onTitleChanged = e => setTitle(e.target.value)
  const onContentChanged = e => setContent(e.target.value)
  const onAuthorChanged = e => setUserId(e.target.value)

  const canSave = [title, content, userId].every(Boolean) && !isLoading

  const onSavePostClicked = async () => {
    if (canSave) {
      try {
        await addNewPost({ title, content, user: userId }).unwrap()
        setTitle('')
        setContent('')
        setUserId('')
      } catch (err) {
        console.error('Failed to save the post: ', err)
      }
    }
  }
  // omit rendering logic
}

import React, { useMemo } from 'react'
import { Link } from 'react-router-dom'
import classnames from 'classnames'

// omit other imports and PostExcerpt

export const PostsList = () => {
  // Query hooks 结果对象包含一个 “refetch” 函数，我们可以调用它来强制重新获取。 
  const {
    data: posts = [],
    isLoading,
    isFetching,
    isSuccess,
    isError,
    error,
    refetch
  } = useGetPostsQuery()

  const sortedPosts = useMemo(() => {
    const sortedPosts = posts.slice()
    sortedPosts.sort((a, b) => b.date.localeCompare(a.date))
    return sortedPosts
  }, [posts])

  let content

  // Query hooks 有一个 isLoading 标志，如果这是第一个数据请求，则为 true
  if (isLoading) {
    content = <Spinner text="Loading..." />
  } else if (isSuccess) {
    const renderedPosts = sortedPosts.map(post => (
      <PostExcerpt key={post.id} post={post} />
    ))
    // 以及一个 isFetching 标志，当任意数据请求正在进行时为true
    // 我们可以查看 isFetching 标志，并在重新获取过程中再次用加载微调器替换整个帖子列表。
    const containerClassname = classnames('posts-container', {
      disabled: isFetching
    })

    content = <div className={containerClassname}>{renderedPosts}</div>
  } else if (isError) {
    content = <div>{error.toString()}</div>
  }

  return (
    <section className="posts-list">
      <h2>Posts</h2>
      // 手动刷新数据
      <button onClick={refetch}>Refetch Posts</button>
      {content}
    </section>
  )
}

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/fakeApi' }),
  // 定义标签，这将帮助识别和处理与数据相关联的所有标签
  tagTypes: ['Post'],
  endpoints: builder => ({
    getPosts: builder.query({
      query: () => '/posts',
      // 使用 providesTags，API slice 将能够跟踪与查询关联的标签（缓存起来），并可以在需要时对其进行快速访问
      // 能够将查询结果缓存，并使用指定的标签进行标记，使该查询结果能够与其他使用相同标签的查询结果进行关联，以实现更快速的重用和更快速的查询。
      providesTags: ['Post']
    }),
    getPost: builder.query({
      query: postId => `/posts/${postId}`
    }),
    addNewPost: builder.mutation({
      query: initialPost => ({
        url: '/posts',
        method: 'POST',
        body: initialPost
      }),
      // 当 mutation 触发时，API slice 会根据 invalidatesTags 中列出的标签强制刷新缓存中相关标签的查询接口。
      // 它会调用与该标签相关联的所有query查询，并强制它们重新获取最新数据，以便您在应用程序中使用最新的数据。
      invalidatesTags: ['Post']
    })
  })
})

// 请看下面示例如何正确的使用标签达到选择性更新。
// RTK Query 知道当我们进行编辑并且具有该 ID 的特定标签缓存无效时，它需要重新获取单个帖子和帖子列表
export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/fakeApi' }),
  // 定义Post标签
  tagTypes: ['Post'],
  endpoints: builder => ({

    getPosts: builder.query({
      query: () => '/posts',
      providesTags: (result = [], error, arg) => [  // 使用默认的参数-空数组，安全处理返回值
        // ①我们通常不这么做，仅为整个列表提供一个通用的 'Post' 标签。
        // 'Post',
        // ②推荐这么做，为整个列表提供通用 'Post' 标签并使其具有任意 ID 的附加标签
        {type: 'Post', id: 'LIST'},
        {type: 'Post', id: 'ALL'},
        // 以及为每个接收到的帖子对象提供一个特定的 {type: 'Post', id} 标签
        ...result.map(({ id }) => ({ type: 'Post', id }))
      ]
    }),
    getPost: builder.query({
      query: postId => `/posts/${postId}`,
      // 为单个 post 对象提供特定的 {type: 'Post', id} 标签
      providesTags: (result, error, arg) => [{ type: 'Post', id: arg }]
    }),

    addNewPost: builder.mutation({
      query: initialPost => ({
        url: '/posts',
        method: 'POST',
        body: initialPost
      }),
      // ①我们通常不这么做，使一般的'Post'标签缓存无效，重新获取整个列表。
      // invalidatesTags: ['Post']
      // ②使具有任意 ID 的附加标签无效，强制重新获取 getPosts 请求接口的帖子列表
      invalidatesTags: [{type: 'Post', id: 'ALL'}]
    }),
    editPost: builder.mutation({
      query: post => ({
        url: `posts/${post.id}`,
        method: 'PATCH',
        body: post
      }),
      // 使特定的 {type: 'Post', id} 标签缓存无效，强制更新。
      // 这将强制重新获取 “getPost” query接口中的单个帖子
      // 以及 “getPosts” query接口中的整个帖子列表，因为它们都提供了与 “{type, id}” 值匹配的标签。
      invalidatesTags: (result, error, arg) => [{ type: 'Post', id: arg.id }]
    })
  })
})

// 忽略部分依赖
import { apiSlice } from './features/api/apiSlice'

async function main() {
  // 启动 mock API server
  await worker.start({ onUnhandledRequest: 'bypass' })

  store.dispatch(apiSlice.endpoints.getUsers.initiate())

  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>,
    document.getElementById('root')
  )
}
main()

import { createSlice, createEntityAdapter,createSelector} from '@reduxjs/toolkit'
import { apiSlice } from '../api/apiSlice'

/* 暂时忽略适配器 - 我们很快会再次使用它
const usersAdapter = createEntityAdapter()
const initialState = usersAdapter.getInitialState()
*/

// API slice 请求接口中的 endpoint.select() 函数将在我们每次调用它时创建一个新的 memoized selector 函数。
// select() 将参数作为缓存键，并且这必须与你作为参数传递给 query hook 或 initiate() thunk 的缓存键相同。
// 生成的 selector 使用该缓存键来准确知道它应该从存储中的缓存状态返回哪个缓存结果。如果不传参数，缓存键变成undefiend。
export const selectUsersResult = apiSlice.endpoints.getUsers.select()

const emptyUsers = []

export const selectAllUsers = createSelector(
  selectUsersResult,
  usersResult => usersResult?.data ?? emptyUsers
)

export const selectUserById = createSelector(
  selectAllUsers,   // input selector
  (state, userId) => userId,  // 为了给output selector 传递userId参数
  (users, userId) => users.find(user => user.id === userId) // output selector
)

/* 暂时忽略 selector——我们稍后再讨论
export const {
  selectAll: selectAllUsers,
  selectById: selectUserById,
} = usersAdapter.getSelectors((state) => state.users)
*/

import { apiSlice } from '../api/apiSlice'

// injectEndpoints() 改变原始 API slice 对象以添加额外的请求接口定义，然后返回它。
export const extendedApiSlice = apiSlice.injectEndpoints({
  endpoints: builder => ({
    getUsers: builder.query({
      query: () => '/users'
    })
  })
})

export const { useGetUsersQuery } = extendedApiSlice

export const selectUsersResult = extendedApiSlice.endpoints.getUsers.select()

import { apiSlice } from '../api/apiSlice'

const usersAdapter = createEntityAdapter()

const initialState = usersAdapter.getInitialState()

export const extendedApiSlice = apiSlice.injectEndpoints({
  endpoints: builder => ({
    // 我们在 getUsers 请求接口添加了一个 transformResponse 选项。
    // 它接收整个响应数据体作为其参数，并应返回要缓存的实际数据。
    getUsers: builder.query({
      query: () => '/users',
      transformResponse: responseData => {
        // 通过调用usersAdapter.setAll(initialState, responseData)，
        // 它将返回标准的 {ids: [],entities: {}} 归一化数据结构，包含所有接收到的项目。
        return usersAdapter.setAll(initialState, responseData)
      }
    })
  })
})

export const { useGetUsersQuery } = extendedApiSlice

// API slice 请求接口中的 endpoint.select() 函数将在我们每次调用它时创建一个新的 memoized selector 函数。
// select() 将参数作为缓存键，并且这必须与你作为参数传递给 query hook 或 initiate() thunk 的缓存键相同。
// 生成的 selector 使用该缓存键来准确知道它应该从存储中的缓存状态返回哪个缓存结果。如果不传参数，缓存键变成undefiend。
export const selectUsersResult = extendedApiSlice.endpoints.getUsers.select()

const selectUsersData = createSelector(
  selectUsersResult,
  usersResult => usersResult.data
)

// adapter.getSelectors() 函数需要给定一个输入 selector，以便它知道在哪里可以找到归一化数据。
// 在这种情况下，数据嵌套在 RTK Query cache reducer 中，因此我们从缓存状态中选择正确的字段。
export const { selectAll: selectAllUsers, selectById: selectUserById } =
  usersAdapter.getSelectors(state => selectUsersData(state) ?? initialState)

import { createSelector } from '@reduxjs/toolkit'

import { selectUserById } from '../users/usersSlice'
import { useGetPostsQuery } from '../api/apiSlice'

export const UserPage = ({ match }) => {
  const { userId } = match.params

  const user = useSelector(state => selectUserById(state, userId))

  // 通过每次调用 selectPostsForUser(result, userId)，它会记住过滤后的数组，只有在获取的数据或用户ID发生变化时才会重新计算。
  const selectPostsForUser = useMemo(() => {
    const emptyArray = []
    // 返回此页面的唯一 selector 实例，以便
     // 过滤后的结果被正确记忆
    return createSelector(
      res => res.data,
      (res, userId) => userId,
      (data, userId) => data?.filter(post => post.user === userId) ?? emptyArray
    )
  }, [])

  // 使用相同的帖子查询，但仅提取其部分数据
  // 在这种情况下，我们将调用字段 “postsForUser”，我们可以从 hook 结果中解构这个新字段。
  const { postsForUser } = useGetPostsQuery(undefined, {
    // selectFromResult 回调从服务器接收包含原始请求元数据和 data 的 result 对象，并且应该返回一些提取或派生的值。
    // 因为 query hooks 为这里返回的任何内容添加了一个额外的 refetch 方法，所以最好始终从 selectFromResult 返回一个对象，其中包含你需要的字段。
    selectFromResult: result => ({
      // 我们可以选择在此处包含结果中的其他元数据字段
      ...result,
      // 在 hook 结果对象中包含一个名为 “postsForUser” 的字段，
       // 这将是一个过滤的帖子列表
      postsForUser: selectPostsForUser(result, userId)
    })
  })

  // omit rendering logic
}

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/fakeApi' }),
  tagTypes: ['Post'],
  endpoints: builder => ({
    // 忽略部分依赖

    addReaction: builder.mutation({
      query: ({ postId, reaction }) => ({
        url: `posts/${postId}/reactions`,
        method: 'POST',
        // 在一个真实的应用程序中，我们可能需要以某种方式基于用户 ID
        // 这样用户就不能多次做出相同的反应
        body: { reaction }
      }),
      async onQueryStarted({ postId, reaction }, { dispatch, queryFulfilled }) {
        // `updateQueryData` 需要请求接口名称和缓存键参数，
        // 所以它知道要更新哪一块缓存状态
        const patchResult = dispatch(
          apiSlice.util.updateQueryData('getPosts', undefined, draft => {
            // `draft` 是 Immer-wrapped 的，可以像 createSlice 中一样 “mutated”
            const post = draft.find(post => post.id === postId)
            if (post) {
              post.reactions[reaction]++
            }
          })
        )
        // 默认情况下，我们期望请求会成功。如果请求失败，我们可以 await queryFulfilled，捕获失败，并撤消补丁更改以恢复 optimistic update。
        try {
          // 当我们 dispatch 该 action 时，返回值是一个 patchResult 对象
          await queryFulfilled
        } catch {
          // 调用 patchResult.undo()，它会自动 dispatch 一个操作来反转补丁差异更改。
          patchResult.undo()
        }
      }
    })
  })
})