【学习打卡】第9天 实战旅游项目/Vue改写

课程名称：[React 17/18 系统精讲 结合TS打造旅游电商平台]

课程章节： 理解React/redux设计模式

主讲老师：阿莱克斯

课程内容：

1. 【概念理解】什么是redux？
2. 创建state
3. 【访问state】获取store数据

课程收获：

设计模式

• MVC MVVM MV* Redux
  • redux npm install redux
    • 剥离组件数据 state
    • 统一存放在store中
    • 组件订阅store获得数据
    • store同步推送数据更新
  • redux 工作流
    • 创建 store Reducer 初始化数据 react组件订阅store store会推送数据 更改数据通过Actions分发传递数据给Reducer 更新数据给store

为类组件使用router6支持

import { useNavigate, NavigateFunction } from "react-router-dom";
import React from "react";
export interface RouteComponentProps {
  navigate: NavigateFunction;
}
export const withRouter = (Component: React.FC) => {
  // 获取类组件的参数 变成函数式
  return (props: any) => {
    const navigate = useNavigate();
    return <Component navigate={navigate} {...props} />;
  };
};

初始化store

import { createStore } from "redux";

const store = createStore(languageReducer);

继承接口 达到复用

// 使用继承
interface State extends LanguageState {}

通过循环和三元运算符进行使用

          <Dropdown.Button
            overlay={
              <Menu
                items={this.state.languageList.map((m) => {
                  return { key: m.code, label: m.name };
                })}
              />
            }
            icon={<GlobalOutlined />}
            style={{ marginLeft: 15 }}
          >
            {this.state.language === "zh" ? "中文" : "English"}
          </Dropdown.Button>

class写法和fc写法 有点绕了 哈哈