类组件与函数式组件与provider的连接

src/components/Header/Header.tsx

 //函数式组件
 import * as React from "react";
-import { Component } from "react";
+// import { Component } from "react";
 import logo from "../../assets/logo.svg";
 import styles from "./Header.module.css";
 import { Layout, Typography, Input, Menu, Button, Dropdown } from "antd";
 import { GlobalOutlined } from "@ant-design/icons";
+import { useSelector } from "../../redux/hooks";
+import { useDispatch } from "react-redux";
+import { useTranslation } from "react-i18next";
 import {
   useHistory,
-  useParams,
-  useLocation,
-  useRouteMatch,
+  // useParams,
+  // useLocation,
+  // useRouteMatch,
 } from "react-router-dom";
-
+import {
+  changeLanguageActionCreator,
+  addLanguageActionCreator,
+} from "../../redux/language/languageActions";
 export const Header: React.FC = () => {
   const history = useHistory();
-  const params = useParams();
-  const location = useLocation();
-  const match = useRouteMatch();
+  // const params = useParams();
+  // const location = useLocation();
+  // const match = useRouteMatch();
+  const languageList = useSelector((state) => state.languageList);
+  const language = useSelector((state) => state.language);
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const changeLanguage = (e) => {
+    if (e.key === "new") {
+      // this.props.addLanguage("新语言", "新语言");
+      dispatch(addLanguageActionCreator("新语言", "新语言"));
+    } else {
+      // this.props.changeLanguage(e.key);
+      dispatch(changeLanguageActionCreator(e.key));
+    }
+  };
+
   return (
     <>
       <div className={styles["app-header"]}>
@@ -27,14 +47,16 @@ export const Header: React.FC = () => {
             <Dropdown.Button
               style={{ marginLeft: 15 }}
               overlay={
-                <Menu>
-                  <Menu.Item>中文</Menu.Item>
-                  <Menu.Item>English</Menu.Item>
+                <Menu onClick={changeLanguage}>
+                  {languageList.map((item, index) => (
+                    <Menu.Item key={item.code}>{item.name}</Menu.Item>
+                  ))}
+                  <Menu.Item key={"new"}>{t("header.slogan")}</Menu.Item>
                 </Menu>
               }
               icon={<GlobalOutlined />}
             >
-              语言
+              {language === "zh" ? "中文" : "English"}
             </Dropdown.Button>
             <Button.Group className={styles["button-group"]}>
               <Button onClick={() => history.push("register")}>注册</Button>

src/components/Header/HeaderClass.tsx

 //类组件
 import * as React from "react";
-import { Component } from "react";
+// import { Component } from "react";
 import logo from "../../assets/logo.svg";
 import styles from "./Header.module.css";
 import { withTranslation, WithTranslation } from "react-i18next";
@@ -17,7 +17,7 @@ import {
   Menu,
   Button,
   Dropdown,
-  MenuItemProps,
+  // MenuItemProps,
 } from "antd";
 import { GlobalOutlined } from "@ant-design/icons";
 import { withRouter, RouteComponentProps } from "react-router-dom";
@@ -128,3 +128,5 @@ class HeaderComponent extends React.Component<
 export const Header = connect(mapStateToProps,mapDispatchToProps)(
   withTranslation()(withRouter(HeaderComponent))
 );
+//6.4日在函数组建里面用connect
+//重学redux封装部分
\ No newline at end of file

src/components/Header/index.ts

-export * from './HeaderClass'
\ No newline at end of file
+export * from './Header'
\ No newline at end of file

src/redux/hooks.ts

+import {useSelector as useReduxSelector,TypedUseSelectorHook} from 'react-redux'
+import {RootState} from './store'
+export const useSelector:TypedUseSelectorHook<RootState> = useReduxSelector
\ No newline at end of file

src/redux/language/languageActions.ts

-import language from "./language";
+import language from "./languageReducer";
 
 export const CHANGE_LANGUAGE = "changeLanguage";
 export const ADD_LANGUAGE = "addLanguage";

src/redux/language/language.ts → src/redux/language/languageReducer.ts

 import i18n from "i18next";
-import {CHANGE_LANGUAGE,ADD_LANGUAGE,languageActionTypes} from './languageActions'
+import {
+  CHANGE_LANGUAGE,
+  ADD_LANGUAGE,
+  languageActionTypes,
+} from "./languageActions";
 
 export interface LanguageState {
   language: "en" | "zh";
@@ -15,10 +19,10 @@ const defaultState: LanguageState = {
 };
 
 // eslint-disable-next-line import/no-anonymous-default-export
-export default (state = defaultState, action:languageActionTypes) => {
+export default (state = defaultState, action: languageActionTypes) => {
   switch (action.type) {
     case CHANGE_LANGUAGE:
-      i18n.changeLanguage(action.payload);//此处会导致不是纯函数
+      i18n.changeLanguage(action.payload); //此处会导致不是纯函数
       return { ...state, language: action.payload };
     case ADD_LANGUAGE:
       return {

src/redux/store.ts

 import { createStore } from "redux";
-import languageReducer from "./language/language";
+import languageReducer from "./language/languageReducer";
 
 const store = createStore(languageReducer);
  export type RootState =ReturnType<typeof store.getState>