在函数组件中使用react-redux

创建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>
}