【学习打卡】第10天 实战旅游项目

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

课程章节： redux重构

主讲老师：阿莱克斯

课程内容：

1. action 拆分
2. 【redux封装】在类组件中使用react-redux

课程收获：

Action Creator 工厂模式

• 使用工厂模式思想分割redux 进行模块化

• 新建 Actions 文件 编写常量值 减少容错

  • export const CHANGE_LANGUAGE = 'change_language'
    

• 使用工厂函数创建

  const changeLanguageActionCreator = (languageCode: "zh" | "en") => {
   return {
     type: CHANGE_LANGUAGE,
     payload: languageCode,
   };
  };
  

• 定义类型

• interface ChangeLanguageAction {
    // typeof 指向
    type: typeof CHANGE_LANGUAGE;
    payload: "zh" | "en";
  }
  

• 删掉原有的extends

  import { changeLanguageActionCreator } from "@/redux/language/Actions";
  

    menuOnClick = (e: any) => {
      // 创建行动对象 通过 dispatch 下发给 Reducer
      const action = changeLanguageActionCreator(e.key)
      store.dispatch(action);
    };
  

系统学习react-redux

首先进行安装

npm install @types/react-redux --save-dev

配置store的Provider

• provider 这是上下文对象context api的数据组件，通过使用provider，我们就可以从组件中把sotre的订阅剥离出来，实现真正意义的redux组件化

• import { Provider } from 'react-redux'
  import store from './redux/store'
  
  <Provider store={store}>
  	<App />
  </Provider>
  

• 封装connect函数

• import { connect } from 'react-redux'
  export const Header = connect()(withTranslation()(withRouter(HeaderComponnet)));
  

• 在这里使用了高阶函数的用法

• 简单理解了一下 mapDispatchToProps函数的返回类型是一个对象，而返回对象中的每一字段就是一个dispatch的处理函数，比如说我们处理语言切换，函数名称 changeLauguage，参数需要接受的是字符串类型的语言代码，而action的创建可以使用工厂函数changeLauguageActionCreator(code)。