官网

与 Redux 配合使用，解决使用 Redux 时，配置繁琐和模板代码太多的问题。

使用心得

Usage With TypeScript

export const store = configureStore({
   ...
});

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

RTK Query

获取和缓存数据

Code Splitting

分割代码，规范代码结构，减少模板代码

数据持久化

1. Persistence and Rehydration
2. Redux Persist
const persistConfig = {
  key: "root",
  storage,
  whitelist: ["auth", "router"],
};

export const store = configureStore({
  reducer: persistReducer(
    persistConfig,
    combineReducers({
      auth: authReducer,
      router: routerReducer,
      district: districtReducer,
      [authApi.reducerPath]: authApi.reducer,
      [userApi.reducerPath]: userApi.reducer,
    })
  ),
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false }).concat(
      authApi.middleware,
      userApi.middleware
    ),
});

export const persist = persistStore(store);
3. Queries
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; //使用 Hook 一定要导入这个包
4. Customizing queries

自己实现一个 baseQuery 就可以添加 header，解析自定义返回值和异常处理

const myFetchBaseQuery: BaseQueryFn<
  string | FetchArgs,
  unknown,
  FetchBaseQueryError,
  {},
  FetchBaseQueryMeta
> = async (args, api, extraOptions) => {
  const result = await fetchBaseQuery({
    baseUrl: apiUrl,
    prepareHeaders: (headers, { getState }) => {
      const token = (getState() as RootState).auth.token;
      if (token) {
        headers.set("authorization", `Bearer ${token}`);
      }
      return headers;
    },
  })(args, api, extraOptions);
  return new Promise<any>((resolve, reject) => {
    let response: Result<any>;
    const { error } = result;
    if (error) {
      response = error.data as Result<any>;
    } else {
      response = result.data as unknown as Result<any>;
    }
    const { data, code, msg } = response;
    if (code >= 200 && code < 300) {
      result.data = data;
      resolve(result);
    } else {
      showError(msg ?? "");
      reject(msg);
    }
  });
};