react+redux(一)

最近学react，以前学个组件库也就是几天的事情，这次都折腾快一个星期了，才入门。虽然可以用react开发界面了，但好多资料里说要开发复杂应用必须用redux，只好找来试试咯。
安装react的开发环境不讲了，如果工程中需要结合redux，则执行以下命令：

#安装redux需要的几个关键依赖组件
cnpm i react-redux redux react-router --save-dev

第一步我们不使用redux来实现一个简单功能，就是点击按钮修改文字的内容。具体环境的搭建不讲了，如果不知道搭建的请查看react整合

效果如下:

点击按钮效果如下:

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);