react+redux(一)

雨点打透心脏的1/2处 2022-06-13 13:49 200阅读 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