【前端，干货】react and redux教程学习实践（二）。

import { createStore } from‘redux‘;
const store = createStore(fn);

store.dispatch(action);

            const render = ()=> ReactDOM.render(
    <div>
        <Number
            value={store.getState()}
            add={(action)=>store.dispatch(action)}  //传入一个函数，传入发送过来的action，由reducers处理之后返回state，
            less={(action)=>store.dispatch(action)}
        />
    </div>,
    content
);

class Number extends Component{
    add(){
        this.props.add({type:"NUMBER_ADD"}) //调用app.js中传过来的箭头函数，传入了type为NUMBER_ADD的action
    }
　　//.....省略
}

import React from"react";
import ReactDOM from"react-dom";
import {InitReducers} from"./reducers";
import {createStore} from"redux";
//这个是react-redux提供的管理state的组件，把它放在最高层就可以实现统一管理state。
import {Provider} from"react-redux";
import Number from"./number";
//createStore生成store，InitReducers在收到action时调用的函数const store = createStore(InitReducers);
const content = document.querySelector(".content");
//直接renderReactDOM.render(
    <Provider store={store}>
        <Number />
    </Provider>,
    content
);

import * as Actions from"./actions"; 
const ReducersActions = {
    [Actions.NUMBER_ADD]:(state,action)=>{
        state.number++;
        return state;
    },
    [Actions.NUMBER_LESS]:(state,action)=>{
        state.number--;
        return state;
    },
    [Actions.NUMBER_VALUE]:(state,action)=>{
        state.number = action.value;
        return state;
    }

}
function InitReducers(state={},action){
    state.number == undefined?state.number=0:state.number;
    if(action.type === "@@redux/INIT"){
        return state;
    }
    state = ReducersActions[action.type](state,action);
    return Object.assign({},state);
}
export {InitReducers}

export const NUMBER_ADD = "NUMBER_ADD";
export const NUMBER_LESS = "NUMBER_LESS";
export const NUMBER_VALUE = "NUMBER_VALUE";
export function setNumber(type,value=false){
    switch(type){
        case"add":
        return {type:NUMBER_ADD}
        case"less":
        return {type:NUMBER_LESS}
        case"value":
        return {type:NUMBER_VALUE,value:value}
    }
}

import React,{Component} from"react";
import {connect} from"react-redux";
//bindActionCreators
import {bindActionCreators} from"redux";
//引入actions
import * as Actions from"./actions";

const propTypes = {
    actions:React.PropTypes.object.isRequired,
    number:React.PropTypes.number.isRequired
}
class Number extends Component{
    setNumber(event){
        let {target} = event;
        let    type = target.getAttribute("data-type");
        if(type != "value"){
            this.props.actions.setNumber(type);
        }else{
            this.props.actions.setNumber(type,target.value);
        }
    }
    render(){
        let props = this.props,
        setNumber = this.setNumber.bind(this);
        return <div>
                    <input type="text" onChange={setNumber} data-type="value" value={props.number}/>
                    <button data-type="add" onClick={setNumber}>+</button>
                    <button data-type="less" onClick={setNumber}>-</button>
                </div>
    }
}
Number.propTypes = propTypes;
//定义组件内需要使用的state某个值function mapStateToProps(state){
    return {
        number:state.number
    }
}
//定义组件内需要调用回调改变state的props参数function mapDispatchToProps(dispatch){
    return {
        //这就是合并actions.js中定义的函数，在组件内this.props.actions.xxx调用bindActionCreators生成的dispatch函数        actions:bindActionCreators(Actions,dispatch)
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Number);

            //
            定义组件内需要使用的state某个值
            function mapStateToProps(state){
    
            return
             {
        number:state.number
    }
}

            //
            定义组件内需要调用回调改变state的props参数
            function mapDispatchToProps(dispatch){
    
            return
             {
        
            //
            这就是合并actions.js中定义的函数，在组件内this.props.actions.xxx调用bindActionCreators生成的dispatch函数
                    actions:bindActionCreators(Actions,dispatch)
    }
}
export 
            default connect(mapStateToProps,mapDispatchToProps)(Number);

            return
             {
        
            //
            这就是合并actions.js中定义的函数，在组件内this.props.actions.xxx调用bindActionCreators生成的dispatch函数
                    actions:bindActionCreators(Actions,dispatch)
    }