使用Decorator改写react-redux

Decorators

使用装饰器改写react-redux

1.安装依赖

yarn add babel-plugin-transform-decorators-legacy -D
npm install --save-dev @babel/plugin-proposal-decorators

"devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.15.8"
}

2.配置

方式1

1. 将配置eject

2. 在项目跟目录中创建`config-overrides.js`文件

3. 引入addDecoratorsLegacy from customize-cra

```js
const {override, addDecoratorsLegacy} = require('customize-cra');
module.exports = override(
    addDecoratorsLegacy()
);

----------- 完整 -------------------
const {override, fixBabelImports, addLessLoader, addDecoratorsLegacy} = require('customize-cra');

module.exports = override(
    // antd按需引入
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    // 修改antd主题
    addLessLoader({
        javascriptEnabled: true,
        // modifyVars: {'@primary-color': '#1DA57A'},
    }),
    addDecoratorsLegacy()
);
```

方式2

1. 配置 .babelrc

   {
   ...
   "plugins": ["transform-decorators-legacy"]  
   ...
   }
   

3.使用装饰器改写

1. 改写react-redux的connect

   1. 改写前

      import { connect } from "react-redux";
      import { createDeleteUserInfoAction } from "xxx/redux/actionCreators/userxxxx";
      
      class Admin extends Component {}
      
      export default connect(
      	state => ({userInfo: state[USER_STORE_NAME]}),
          {
              deleteUserInfo: createDeleteUserInfoAction
          }
      )(Login);
      

   2. 改写后

      import { connect } from "react-redux";
      import { createDeleteUserInfoAction } from "xxx/redux/actionCreators/userxxxx";
      
      const mapStateToProps = state => ({userInfo: state[USER_STORE_NAME]});
      const mapDispatchProps = {
          deleteUserInfo: createDeleteUserInfoAction
      }
      -------------- 以下为主要代码 ---------------------
      // 在组件中同样可以使用this.props拿到传进来的userInfox信息, 和操作信息的方法
      @connect(mapStateToProps, mapDispatchProps)
      class Admin extends Component {}
      
      // 这里最好单独导出
      export default Admin;
      

   3. 其他写法

      export default
      @connect(mapStateToProps, mapDispatchProps)
      class Admin extends Component {}
      
      
      export default @connect(mapStateToProps, mapDispatchProps)
      class Admin extends Component {}
      

      以上都能正常实现功能

   4. 错误写法(未测试)

      // 如果使用这种方式替换单独导出 则装饰器无效
      @connect(mapStateToProps, mapDispatchProps)
      export default class Admin extends Component {}  // 装饰器无效 (没测试过)
      

2. 有难度的改写

   改写前

   import { Form } from "antd";
   
   class Login extends Component {}
   
   export default connect(
   	mapStateToProps, 
   	mapDispatchProps
   )(Form.create()(Login));
   

   改写后

   // 两个装饰器 依次执行
   /*
   	connect(mapStateToProps, mapDispatchProps)(@Form.create()(Login))
   */
   @connect(mapStateToProps, mapDispatchProps)
   @Form.create()
   class Login extends Component {}
   
   export default Login;