react-redux简单实用

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MDGE/p/10246743.html

文章标签：

#javascript #json #ViewUI

本文详细介绍如何使用Redux和React-Redux进行状态管理，包括所需依赖的安装与配置，如Redux, React-Redux, Redux-Actions及Babel转码插件。文章还涉及ES6/7语法的兼容性处理，确保项目顺利运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先了解一个过程，redux 肯定是通过在组件中出发一个方法(事件),我们可以实现一个简单的例子播放和停止播放(写到这今日心情不好，下次继续)

redux需要安装以下依赖：
cnpm install redux --save
cnpm install react-redux --save
cnpm install redux-actions --save
因为用到了es6/7的语法，需要安装babel转码
cnpm install babel-plugin-import --save
cnpm install babel-plugin-transform-decorators-legacy --save //装饰器模块
cnpm install babel-preset-es2015 --save
cnpm install babel-preset-react --save
cnpm install babel-preset-stage-2 --save
以及添加.babelrc文件（与package.json同级）
{
"presets": [ //presets 设置转码规则
"es2015",
"react",
"stage-2",
],
"plugins": ["transform-decorators-legacy"] //plugins 添加插件
}

redux需要安装以下依赖：
cnpm install redux --save
cnpm install react-redux --save
cnpm install redux-actions --save
@connect装饰器报错处理
因为用到了es6/7的语法，需要安装babel转码
npm run eject //解除封装
cnpm install babel-plugin-transform-decorators-legacy --save-dev
cnpm install @babel/plugin-proposal-decorators --save-dev
在package.json中添加插件支持ES7
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
},

转载于:https://www.cnblogs.com/MDGE/p/10246743.html