redux 配置@connect()装饰器

落日映苍穹つ 2022-12-20 14:55 122阅读 0赞

## package.json ##

"dependencies": { 
    	"@babel/plugin-proposal-decorators": "^7.12.1",
    	"@craco/craco": "^5.8.0",
    	"craco-less": "^1.17.0",
    }
    "scripts": { 
       "start": "craco start",
       "build": "craco build",
       "test": "craco test"
     },

## craco.config.js ##

const CracoLessPlugin = require("craco-less");
    
    module.exports = { 
      babel: { 
        //支持装饰器
        plugins: [["@babel/plugin-proposal-decorators", { legacy: true}]]
      },
      plugins: [
        { 
          plugin: CracoLessPlugin
        }
      ]
    };

## 使用： ##

import {  Component } from "react";
    import {  bindActionCreators } from "redux";
    import {  connect } from "react-redux";
    
    @connect(
      // mapStateToProps 把state映射到props
      ({ count}) => ({ count}),
      // mapDispatchToProps object| function 把Dispatch映射到props
      // {add: () => ({type: "ADD"}), minus: () => ({type: "MINUS"})}
      dispatch => { 
        let creators = { 
          add: () => ({ type: "ADD"}),
          minus: () => ({ type: "MINUS"})
        };
        creators = bindActionCreators(creators, dispatch);
        return { dispatch, ...creators};
      }
    )
    class ReactReduxPage extends Component { 
      render() { 
        const { count, dispatch, add, minus} = this.props;
        return (<div>...<div>)
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关 Typescript 的高级语法之类装饰器、方法装饰器、访问器装饰器、属性装饰器和参数装饰器

一、Typescript 的类装饰器和方法装饰器 1. 随着 `TypeScript`和 `ES6` 里引入了类，在一些场景下我们需要额外的特性来支持标注或修改类及其成

冷不防/ 2023年02月17日 08:52/ 0 赞/ 25 阅读

相关入门 redux 和 @connect 装饰器

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群 ![8e4a4768d03e5f5468573352b01e7ab8.png][] 来

客官°小女子只卖身不卖艺/ 2023年01月19日 09:55/ 0 赞/ 146 阅读

相关 redux 配置@connect()装饰器

package.json "dependencies": { "@babel/plugin-proposal-decorators": "^7.12.

落日映苍穹つ/ 2022年12月20日 14:55/ 0 赞/ 123 阅读

相关 ES6 装饰器及webpack下配置装饰器语法

ES6装饰器 > 我们在使用ES6开发是，如使用umijs+dva开发，经常会使用`@connect()`，然后，我们的组件中的属性，就会用`dispacth`方法，同时

怼烎@/ 2022年12月02日 04:07/ 0 赞/ 306 阅读

相关【python】闭包和装饰器、通用装饰器、多个装饰器、带参装饰器、类装饰器

1、闭包概念：把使用了外部函数变量的内部函数称为闭包构成闭包的三个条件：在函数嵌套的基础上(在外部函数内定义一个内部函数) 内部函数使用外部函数变

- 日理万妓/ 2022年11月28日 13:44/ 0 赞/ 266 阅读

相关 React装饰器配置

没有配置会报下面的错 Support for the experimental syntax ‘decorators-legacy’ isn’t currently

￡神魔★判官ぃ/ 2022年10月29日 10:26/ 0 赞/ 134 阅读

相关模块开发之react-redux使用装饰器函数Decorator（九）

模块开发之react-redux使用装饰器函数Decorator（九）模块开发之react-redux使用装饰器函数Decorator（九）前言

不念不忘少年蓝@/ 2022年05月21日 04:38/ 0 赞/ 259 阅读

相关 React-Redux 的用法及connet用装饰器编写

一.介绍 1.说明使用react-redux是为了更好的组织react和redux。这个库是可以选用的。实际项目中，你应该权衡一下，是直接使用 Redux

我不是女神ヾ/ 2021年09月15日 19:58/ 0 赞/ 254 阅读

相关 react 支持装饰器配置

1、安装 cnpm -D install react-app-rewired customize-cra cnpm -D install @bab

今天药忘吃喽~/ 2021年07月24日 11:37/ 0 赞/ 296 阅读

相关 react-redux的connect()方法

容器组件使用 connect() 方法连接 Redux 我们用 react-redux 提供的 connect() 方法将“笨拙”的 Counter 转化成容器组件。co...

系统管理员/ 2021年03月28日 15:22/ 1 赞/ 552 阅读