organize i18n functions, and only keep switch

src/components/Header/HeaderClass.tsx

@@ -12,28 +12,24 @@ import {
 } from 'antd';
 import { withRouter, RouteComponentProps } from "react-router-dom";
 import { RootState } from "../../redux/store";
-import { withTranslation,WithTranslation } from "react-i18next";
-import { changeLanguageActionCreator,addLanguageActionCreator } from "../../redux/language/languageActions"
+import { withTranslation, WithTranslation } from "react-i18next";
+import { changeLanguageActionCreator } from "../../redux/language/languageActions"
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 
-const mapStateToProps = (state: RootState)=>{
+const mapStateToProps = (state: RootState) => {
   return {
     language: state.language,
     languageList: state.languageList
   }
 }
 
-const mapDispatchToProps = (dispatch: Dispatch)=>{
+const mapDispatchToProps = (dispatch: Dispatch) => {
   return {
-    changeLanguage:( code:"zh"|"en" )=>{
+    changeLanguage: (code: "zh" | "en") => {
       const action = changeLanguageActionCreator(code);
       dispatch(action);
     },
-    addLanguage:(name: string, code: string)=>{
-      const action = addLanguageActionCreator(name,code);
-      dispatch(action);
-    }
   }
 }
 
@@ -43,13 +39,9 @@ type PropsType = RouteComponentProps & // react-router 路由props类型
   ReturnType<typeof mapDispatchToProps>;// redux dispatch 映射类型
 class HeaderComponent extends React.Component<PropsType> {
 
-  menuClickHandler = (e:any)=>{
+  menuClickHandler = (e: any) => {
     console.log(e);
-    if(e.key === "new"){
-      this.props.addLanguage("新语言","new_lang");
-    }else{
-      this.props.changeLanguage(e.key);
-    }
+    this.props.changeLanguage(e.key);
   }
 
   render() {
@@ -68,20 +60,19 @@ class HeaderComponent extends React.Component<PropsType> {
               overlay={
                 <Menu onClick={this.menuClickHandler}>
                   {
-                    this.props.languageList.map((l)=>{
+                    this.props.languageList.map((l) => {
                       return (<Menu.Item key={l.code}>{l.name}</Menu.Item>)
                     })
                   }
-                  <Menu.Item key={"new"}>{t("header.add_new_language")}</Menu.Item>
                 </Menu>
               }
               icon={<GlobalOutlined />}
             >
-              { this.props.language === "zh" ? "中文":"English" }
+              {this.props.language === "en" ? "English" : "中文"}
             </Dropdown.Button>
             <Button.Group className={styles['button-group']}>
               <Button onClick={() => history.push("register")}>{t("header.register")}</Button>
-              <Button onClick={() => history.push("signIn")}>{t("header.signin")}</Button>
+              <Button onClick={() => history.push("register")}>{t("header.signin")}</Button>
             </Button.Group>
           </div>
         </div>
@@ -125,6 +116,6 @@ class HeaderComponent extends React.Component<PropsType> {
   }
 }
 
-export const Header = connect(mapStateToProps,mapDispatchToProps)(
+export const Header = connect(mapStateToProps, mapDispatchToProps)(
   withTranslation()(withRouter(HeaderComponent))
 );

src/i18n/config.ts

@@ -3,6 +3,7 @@ import { initReactI18next } from 'react-i18next';
 import translation_en from './en.json';
 import translation_zh from './zh.json';
 
+// 后面可以在这里加其他的语言
 const resources = {
     en: {
         translation:translation_en
@@ -16,7 +17,7 @@ i18n
     .use(initReactI18next)
     .init({
         resources,
-        lng:"en",
+        lng:"en",// 默认显示的语言
         interpolation:{
             escapeValue:false
         }

src/pages/home/HomePage.tsx

@@ -26,9 +26,9 @@ export class HomePageComponent extends React.Component<WithTranslation, State> {
 
 
     render() {
-        // const { t } = this.props;
+        const { t } = this.props;
         // const { productList, loading, error } = this.state;
-
+console.info('jjjjj',this.props)
         return (
             <div>
 

src/redux/language/languageActions.ts

@@ -1,15 +1,10 @@
 export const CHANGE_LANGUAGE = "change_language";
-export const ADD_LANGUAGE = "add_language";
 
 interface ChangeLanguageAction {
     type: typeof CHANGE_LANGUAGE,
     payload:"zh"|"en"
 }
 
-interface AddLanguageAction {
-    type: typeof ADD_LANGUAGE,
-    payload: { name: string, code: string }
-}
 
 export const changeLanguageActionCreator = (languageCode:"zh"|"en") : ChangeLanguageAction =>{
     return {
@@ -18,11 +13,4 @@ export const changeLanguageActionCreator = (languageCode:"zh"|"en") : ChangeLang
     }
 }
 
-export type LanguageActionTypes = ChangeLanguageAction | AddLanguageAction;
-
-export const addLanguageActionCreator = (name: string, code: string): AddLanguageAction =>{
-    return {
-        type:ADD_LANGUAGE,
-        payload:{ name, code }
-    }
-}
+export type LanguageActionTypes = ChangeLanguageAction;

src/redux/language/languageReducer.ts

@@ -1,12 +1,13 @@
 import i18n from "i18next";
-import { CHANGE_LANGUAGE,ADD_LANGUAGE, LanguageActionTypes } from "./languageActions";
+import { CHANGE_LANGUAGE, LanguageActionTypes } from "./languageActions";
 export interface LanguageState {
     language: "en" | "zh";
     languageList:{name:string; code:string; }[];
 }
 
+// 按钮处初始化显示
 const defaultState: LanguageState = {
-    language:"zh",
+    language:"en",
     languageList:[
         { name:"中文", code:"zh" },
         { name:"English", code:"en" }
@@ -21,11 +22,6 @@ export default ( state= defaultState, action: LanguageActionTypes)=>{
                 ...state, 
                 language: action.payload
             };
-        case ADD_LANGUAGE:
-            return { 
-                ...state, 
-                languageList:[...state.languageList,action.payload]
-            };
         default:
             return state;
     }