[redux] ts声明useSelector和useDispatch

先安装
安装 | Redux 中文官网

1. npm install react-redux
2. npm install @reduxjs/toolkit

复制代码

界说一个切片

1. import { createSlice } from '@reduxjs/toolkit';
3. const userSlice = createSlice({
4.   name: 'user',
5.   initialState: {
6.     name: 'lsm',
7.     age: 24,
8.   },
9.   reducers: {},
10. });
11. //注意这里写导出reducer, 如果你不写就得在index.ts导入的时候写
12. export default userSlice.reducer;

复制代码

总仓库导入

1. import { configureStore } from '@reduxjs/toolkit';
2. import userSlice from './user';
3. import shopSlice from './shop';
4. const store = configureStore({
5.   reducer: {
6.     user: userSlice,
7.     shop: shopSlice,
8.   },
9. });
10. // 从 store 本身推断出 `RootState` 和 `AppDispatch` 类型
11. export type RootState = ReturnType<typeof store.getState>;
12. export default store;

复制代码

main.ts导入

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

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

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

复制代码

以是在index.ts里趁便导出

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

复制代码

不想写泛型, 如许写也可行

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

复制代码

这时候你会好奇了 
ReturnType是什么

你传一个函数的范例进去会自动推断出返回值的范例了
typeof 是获取函数的范例, ReturnType会根据函数的范例推断出它的返回值范例的值
当然, 你也可以先调用store.getState()获取返回值,再用typeof获取返回值的范例也可以,但如许太蠢了!!! 不敷优雅!

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

复制代码

---

---

---

---

但还是很麻烦,表面引入还得声明(state: RootState)
以是在导出的时候重写函数就行了

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。