可先查看我的回来的简单入门
react-redux是使用回来的开发反应时使用的一个插件,另外插一句,回来的不是反应的产品,vue和角中也可以使用<>强回来的;下面简单讲解,如何使用react-redux来开发反应。
<强>描述
这个插件可以让我们的回家的代码更加的简洁和美观。我假设你已经有一个使用create-react-app创建的一个可以显示hello world的反应环境,并且已经安装来回来的。
注意:如果是刚使用create-react-app创建的,需要运行npm弹射弹跑出个性化设置,这样就可以自定义配置了。
<>强安装
npm我react-redux——保存
<强>使用
react-redux提供了两个重要的接口:提供者,连接,使用了这个插件,react-redux的订阅和调度就可以忘记来,它们就用不着了。
代码结构
//index.js
从“反应”进口的反应;
从“进口ReactDOM react-dom ';
进口的。/index.css”;
导入应用程序从“。/App”;
从“进口registerServiceWorker。/registerServiceWorker ';
进口{createStore, applyMiddleware} '回来的';
从“进口铛redux-thunk ';
进口{减速器}”。/index.redux ';
从“react-redux”进口{提供商}
常量存储=createStore(减速机、applyMiddleware(铛));
ReactDOM.render (
& lt;提供程序存储={商店}祝辞
& lt; App/比;
& lt;/Provider>
. getelementbyid(根)
);
registerServiceWorker ();
之前
提供者中应用的最外层,把商店传给它,只使用这一次。
//app.js
进口的反应,从“反应”{组件};
进口{addCreator、removeCreator addAsync}”。/index.redux ';
从“react-redux”进口{连接};
类应用扩展组件{
呈现(){
回报(
& lt; div className=在“应用程序”;
& lt; h2>现在有美女{this.props.num}个灵活;/h2>
& lt;按钮>//react.redux.js
const添加=癮ddGirl”,删除=皉emoveGirl”;
导出函数减速器(国家=0,行动){
开关(action.type) {
案例添加:
返回状态+ 1;
删除:
返回状态- 1;
默认值:
返回10;
}
}
导出功能addCreator () {
返回{类型:添加};
}
导出功能removeCreator () {
返回{类型:删除};
}
导出功能addAsync () {
返回(调度,getState)=比;{
setTimeout(函数(){
调度(addCreator ());
}, 1000);
}
}
之前
<强>使用装饰器的方式更优雅的写连接
首先需要安装babel-plugin-transform-decorators-legacy,并在package.json中配置。
<>强安装
npm我babel-plugin-transform-decorators-legacy——save-dev这个只是开发使用,所以安装到——save-dev
<>强配置
配置巴别塔的插件属性
“巴别塔”:{
“预设”:(
“react-app”
),
“插件”:(
[" transform-decorators-legacy "]
]
}
之前
修改原来写法
使用@connect来重新定义,写到类的上头即可。
//App.js
@connect((状态)=比;}({num:状态),{addCreator、removeCreator addAsync})
类应用扩展组件{
.....//省略//函数mapStateToProps(状态){//返回{num:国家}//}//应用程序=连接(mapStateToProps, {addCreator、removeCreator addAsync})(应用);
之前
<强> VS代码装饰器提示“experimentalDecorators”的解决办法
点左击Visual Studio代码下角的配置按钮(或者文件祝辞首选项祝辞配置,Windows环境),打开用户设置窗口,在搜索框内输入“experimentalDecorators”,发现竟然能够找到选项,如下:
“javascript.implicitProjectConfig。experimentalDecorators”:假
改成这样就可以了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
