[redux] ts声明useSelector和useDispatch

先安装

安装 | Redux 中文官网

npm install react-redux
npm install @reduxjs/toolkit

定义一个切片

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

const userSlice = createSlice({
  name: 'user',
  initialState: {
    name: 'lsm',
    age: 24,
  },
  reducers: {},
});
//注意这里写导出reducer, 如果你不写就得在index.ts导入的时候写
export default userSlice.reducer;

总仓库导入

import { configureStore } from '@reduxjs/toolkit';
import userSlice from './user';
import shopSlice from './shop';
const store = configureStore({
  reducer: {
    user: userSlice,
    shop: shopSlice,
  },
});
// 从 store 本身推断出 `RootState` 和 `AppDispatch` 类型
export type RootState = ReturnType<typeof store.getState>;
export default store;

main.ts导入

怎么使用?

这样就行,返回的是总state, 得拿一个出来,这个时候发现点的时候没有提示????怎么办

其实,这2个是一个东西,结果是true,所以只要拿到state的类型就行

  const userStore = useSelector((state) => {
    console.log(state == store.getState());//true
  });

所以在index.ts里顺便导出

// 从 store 本身推断出 `RootState` 和 `AppDispatch` 类型
export type RootState = ReturnType<typeof store.getState>;

不想写泛型, 这样写也可行

  const shopStore = useSelector<RootState>((state) => state.shop);
  const userStore = useSelector((state: RootState) => state.user);
  console.log(shopStore);
  console.log(userStore);

这时候你会好奇了 

ReturnType是什么

你传一个函数的类型进去会自动推断出返回值的类型了

typeof 是获取函数的类型, ReturnType会根据函数的类型推断出它的返回值类型的值

当然, 你也可以先调用store.getState()获取返回值,再用typeof获取返回值的类型也可以,但这样太蠢了!!! 不够优雅!

// 从 store 本身推断出 `RootState` 和 `AppDispatch` 类型
export type RootState = ReturnType<typeof store.getState>;
//这样也可
const RootStateData = store.getState();
export type RootStateDataType = typeof RootStateData;

但还是很麻烦,外面引入还得声明(state: RootState)

所以在导出的时候重写函数就行了

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;