react+redux(一) 雨点打透心脏的1/2处 2022-06-13 13:49 158阅读 0赞 最近学react,以前学个组件库也就是几天的事情,这次都折腾快一个星期了,才入门。虽然可以用react开发界面了,但好多资料里说要开发复杂应用必须用redux,只好找来试试咯。 安装react的开发环境不讲了,如果工程中需要结合redux,则执行以下命令: #安装redux需要的几个关键依赖组件 cnpm i react-redux redux react-router --save-dev 第一步我们不使用redux来实现一个简单功能,就是点击按钮修改文字的内容。具体环境的搭建不讲了,如果不知道搭建的请查看[react整合][react] 效果如下: ![这里写图片描述][SouthEast] 点击按钮效果如下: ![这里写图片描述][SouthEast 1] index.jsx的内容如下:不采用redux,直接操作state状态来实现 import React,{Component} from 'react'; import ReactDom from 'react-dom'; var NoRedux=React.createClass({ getInitialState: function () { return { message:'系统测试' } }, clickHandle:function(){ this.setState({ message:this.state.message=="系统测试"?"点击我了发生改变":"系统测试" }) }, render:function(){ return <div className="headerDiv"> <h1>{ this.state.message}</h1> <button onClick={ this.clickHandle}>点击我</button> </div> } }) var bodyDiv=document.createElement("div"); document.body.appendChild(bodyDiv); ReactDom.render(<NoRedux/>,bodyDiv); 第二步 我们使用redux来实现上面的功能。 使用redux后的内容,如果简单功能采用redux反而感觉代码复杂了,但如果功能复杂的话,可以将redux的内容移动到另外一个js里面. import React, { Component } from 'react'; var ReactDom=require("react-dom"); import { createStore } from 'redux'; import { Provider, connect } from 'react-redux'; var App=React.createClass({ render:function(){ const {message,onButtonClick} = this.props; return ( <div> <h1> {message} </h1> <button onClick={onButtonClick}>click me</button> </div> ); } }) const buttonClickAction = { type:'BUTTON_CLICK' } //reducer const initialState = { message: '系统测试' } const reducer = (state = initialState, action) => { switch (action.type) { case 'BUTTON_CLICK': return { message: state.message=="系统测试"?"点击我了发生改变":"系统测试" } default: return initialState; } } //store let store = createStore(reducer); **//映射Redux state到组件的属性 function mapStateToProps(state) { return { message: state.message } }** //映射Redux actions到组件的属性 function mapDispatchToProps(dispatch){ return{ onButtonClick:()=>dispatch(buttonClickAction), onChangeText:()=>dispatch(changeTextAction) } } //连接组件 App = connect(mapStateToProps, mapDispatchToProps)(App) var dodyDiv2=document.createElement('div'); document.body.appendChild(dodyDiv2); var messageBox=ReactDom.render( <Provider store={store}> <App /> </Provider>,dodyDiv2); [react]: http://blog.csdn.net/weiyongliang_813/article/details/74147583 [SouthEast]: /images/20220613/436b601695df4b44a8dc65d777fc5d1e.png [SouthEast 1]: /images/20220613/c79c5b830148410faf15344afb771fea.png
还没有评论,来说两句吧...