创建redux/hooks.ts文件
import {useSelector as useReduxSelector, TypedUseSelectorHook} from 'react-redux';
import { RootState } from './store';
export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector;
store.js文件
const store = createStore(languageReducer);
export type RootState = ReturnType<typeof store.getState>
在header.tsx文件中使用hook
import React from "react";
import { useSelector } from "../../redux/hooks"; //useSelector从store中连接state数据
import { useDispatch } from "react-redux";
import { changeLanguageActionCreator, addLanguageActionCreator} from '../../redux/language/languageActions';
import {useTranslation} from 'react-i18next';
export const Header : React.FC = ()=>{
const language = useSelector((state) => state.language);
const languageList = useSelector((state) => state.languageList);
const { t} = useTranslation();
const dispatch = useDispatch();
const menuClickHander = (e)=>{
if(e.key === 'new'){
dispatch(addLanguageActionCreator('新语言', 'new_lang'));
}else{
dispatch(changeLanguageActionCreator(e.key));
}
}
return <Menu onClick={menuClickHander}>
{languageList.map(l => <Menu.Item key={l.code}>{l.name}</Menu.Item>)}
<Menu.Item key={'new'}>{t('header.add_new_language')}</Menu.Item>
</Menu>
}