study部分

package.json

@@ -14,6 +14,7 @@
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.7",
     "antd": "^4.16.1",
+    "axios": "^0.21.1",
     "i18next": "^20.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/App.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./App.module.css";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 // import { TypographyProps } from "antd/lib/typography/Typography";
-import { HomePage, SignInPage, Register,Deatil } from "./pages";
+import { HomePage, SignInPage, Register,Deatil,Studys } from "./pages";
 function App() {
   return (
     <div className={styles.App}>
@@ -11,6 +11,7 @@ function App() {
           <Route exact path="/" component={HomePage} />
           <Route path="/signin" component={SignInPage} />
           <Route path="/register" component={Register} />
+          <Route path="/studys" component={Studys} />
           <Route path="/detail/:tourisRouteId" component={Deatil} />
           <Route render={() => <h1>404 NOT FOUND</h1>} />
         </Switch>

src/components/Header/Header.tsx

@@ -3,6 +3,7 @@ import * as React 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";
@@ -23,14 +24,14 @@ export const Header: React.FC = () => {
   // const params = useParams();
   // const location = useLocation();
   // const match = useRouteMatch();
-  const languageList = useSelector((state) => state.languageList);
-  const language = useSelector((state) => state.language);
+  const languageList = useSelector((state) => state.language.languageList);
+  const language = useSelector((state) => state.language.language);
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const changeLanguage = (e) => {
     if (e.key === "new") {
       // this.props.addLanguage("新语言", "新语言");
-      dispatch(addLanguageActionCreator("新语言", "新语言"));
+      dispatch(addLanguageActionCreator("新语言", "newLanguage"));
     } else {
       // this.props.changeLanguage(e.key);
       dispatch(changeLanguageActionCreator(e.key));
@@ -58,6 +59,7 @@ export const Header: React.FC = () => {
             >
               {language === "zh" ? "中文" : "English"}
             </Dropdown.Button>
+            
             <Button.Group className={styles["button-group"]}>
               <Button onClick={() => history.push("register")}>注册</Button>
               <Button onClick={() => history.push("signin")}>登陆</Button>

src/components/Header/HeaderClass.tsx

@@ -25,8 +25,8 @@ import  { RootState } from "../../redux/store";
 
 const mapStateToProps = (state: RootState) => {
   return {
-    language: state.language,
-    languageList: state.languageList,
+    language: state.language.language,
+    languageList: state.language.languageList,
   };
 };
 const mapDispatchToProps =(dispatch:Dispatch) =>{

src/pages/Home/home.tsx

@@ -62,7 +62,7 @@ export class HomePageComponent extends React.Component<WithTranslation> {
           <ProductCollection
             title={
               <Typography.Title level={3} type="success">
-                  {t("home_page.domestic_travel")}
+                  {t("home_page.hot_recommended")}
               </Typography.Title>
             }
             sideImage={sideImage3}

src/pages/index.ts

 export * from'./Home'
 export * from './register'
 export * from './signin'
-export * from './detail'
+export * from './detail'
\ No newline at end of file
+export * from './studys'
\ No newline at end of file

src/pages/studys/index.ts

+export * from './studys'
\ No newline at end of file

src/pages/studys/studys.tsx

+import * as React from "react";
+import { Component } from "react";
+import styles from "./studys.module.css";
+import { Input ,Button} from 'antd';
+import { useSelector } from "../../redux/hooks";
+import { useDispatch } from "react-redux";
+export const Studys: React.FC = () => {
+  const dispatch = useDispatch();
+  const cityList =useSelector((state)=>state.city.cityLists)
+  const cityName =useSelector((state)=>state.city.cityName)
+  const cityInput =useSelector((state)=>state.city.cityInput)
+  const addCity =()=>{
+    console.log(cityInput)
+  }
+  const changeInput=(e)=>{
+    // console.log(e.target.value)
+    const action = {
+      type: 'changeInput',
+      value: e.target.value,
+    };
+    dispatch(action)
+  }
+  return (
+    <>
+      {/* 做一个与header.tsx类似的页面 */}
+      <h1>练习页面</h1>
+      <div>
+        <div>添加你想去的城市：
+        <input placeholder="Basic usage"onChange={changeInput} style={{width:200}} value={cityInput}  />
+        <Button type="primary" onClick={addCity}  >
+          添加
+        </Button>
+        </div>
+        <h1>我最喜欢的城市：{cityName}</h1>
+        <h1>我想去的城市:{cityList.map((item,index)=>{
+          return(
+            <>
+            <span>{item.name}</span>
+            </>
+          )
+        })}</h1>
+      </div>
+    </>
+  );
+};

src/redux/citys/cityActions.ts

+export const CHANGE_INPUT ='changeInput'
+export {}
\ No newline at end of file

src/redux/citys/cityReducer.ts

+import {CHANGE_INPUT} from './cityActions'
+export interface CityState {
+    cityInput:string | number
+  cityName: string;
+  cityLists: { name: string }[];
+}
+const defaultState: CityState = {
+    cityInput:'',
+  cityName: "东京",
+  cityLists: [
+    {
+      name: "东京",
+    },
+  ],
+};
+
+ export default (state = defaultState, action) => {
+  switch (action.type) {
+    case CHANGE_LANGUAGE:
+      i18n.changeLanguage(action.payload); //此处会导致不是纯函数
+      return { ...state, language: action.payload };
+  
+    default:
+      return state;
+  }
+ };

src/redux/language/language.ts

+//无用
+import i18n from "i18next";
+import {
+  CHANGE_LANGUAGE,
+  ADD_LANGUAGE,
+  languageActionTypes,
+} from "./languageActions";
+
+export interface LanguageState {
+
+  language: "en" | "zh";
+  languageList: { name: string; code: string }[];
+}
+
+const defaultState: LanguageState = {
+  language: "zh",
+  languageList: [
+    { name: "中文", code: "zh" },
+    { name: "English", code: "en" },
+  ],
+};
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default (state = defaultState, action: languageActionTypes) => {
+  switch (action.type) {
+    case CHANGE_LANGUAGE:
+      i18n.changeLanguage(action.payload); //此处会导致不是纯函数
+      return { ...state, language: action.payload };
+    case ADD_LANGUAGE:
+      return {
+        ...state,
+        languageList: [...state.languageList, action.payload],
+      };
+    default:
+      return state;
+  }
+};

src/redux/store.ts

-import { createStore } from "redux";
+import { createStore ,combineReducers} from "redux";
 import languageReducer from "./language/languageReducer";
-
-const store = createStore(languageReducer);
+import CityReducer from './citys/cityReducer'
+const rootReducer = combineReducers({
+    language:languageReducer,
+    city:CityReducer
+})
+const store = createStore(rootReducer);
  export type RootState =ReturnType<typeof store.getState> 
 
 export default store;