React 环境增加Redux ,React-Redux

引入 Redux 的目的， 状态管理！ React-Redux 就是完成一些粘合剂的作用。
简而化之的理解就是将数据放在store 中维护， 操作逻辑放在reducer中去写。
更功利的表达就是：  就是引入以后， 写控件的时候 根据props 去展示数据，操作也在props去引用。 各司其职。 

Redux 使用到：createStore, dispatch
代码参考： 

import React from "react";
import {connect} from "react-redux";

class App extends React.Component{
    constructor(){
        super();
    }

    render(){
        return <div>
            <h1>{this.props.v}</h1>
            <button onClick={()=>{
                this.props.add()
            }}>按我加1</button>
        </div>
    }
}

export default connect(
    (state) => ({
        v : state.v
    }),
    (dispatch) => ({
        add(){
            dispatch({"type" : "ADD"})
        }
    })
)(App);

相应配置。 npm安装React, React-redux， redux-logger(每次调用dispatch 之前后都可以看状态， 方便调试）

//展示界面。 redux的createStore


import React from "react";
import ReactDOM from "react-dom";
import {createStore , applyMiddleware} from "redux";
import {Provider} from "react-redux";
import reduxLogger from "redux-logger";

import App from "./App.js";
import reducer from "../reducers";

// 创建store，项目只有唯一的一个store，全局数据。applyMiddleware表示Logger插件。
const store = createStore(reducer, applyMiddleware(reduxLogger));
console.log(store.getState());

ReactDOM.render(
    <Provider store={store}>
        <App></App>
    </Provider>
    ,
    document.getElementById("app")
)

//控件App 只管渲染界面，connect 使用。
import React from "react";
import {connect} from "react-redux";

export class App extends React.Component{
    constructor(){
        super();
    }

    render(){
        return <div>
            <h1>{this.props.v}</h1>
            <button onClick={()=>{
                this.props.add()
            }}>按我加1</button>
        </div>
    }
}

export default connect(
    (state) => ({
        v : state.v
    }),
    (dispatch) => ({
        add(){
            dispatch({"type" : "ADD"})
        }
    })
)(App);

//reducers/index.js 操作部分
export default (state = {"v" : 100} , action) => {
    if(action.type == "ADD"){
        return {
            "v" : state.v + 1
        }
    } else if (action.type == "MINUS") {
        return {
            "v": state.v - 1
        }
    }
    return state;
}

进一步 分离actions 。 如上。
 

export default connect(
    (state) => ({
        v : state.v
    }),
    (dispatch) => ({
        add(){
            dispatch({"type" : "ADD"})
        }
    })
)(App);

变更为： 
export default connect(
    (state) => ({
        v : state.v
    }),
    (dispatch) => {
        return {
            actions:bindActionCreators(actions, dispatch)
        }
    }
)(App);
//需要引入，增加actions 文件：
import {bindActionCreators} from "redux"
import * as actions from "./actions.js"


//action.js 文件：
export const add = ()=> {
//console.log("未点击时，已经执行函数绑定操作")
    return {"type":"ADD"}
}
export const minus = ()=> {return {"type":"MINUS"}}

export const attachNumber = (number) =>{
    return {"type":"ATTACHNUMBER","number":number}
}

如果需要传参操作： 
需要

//reducers/index.js 对传递参数的使用 
else if(action.type == "ATTACHNUMBER") {
        return {
            ...state,
            "v": state.v + action.number
        }
    }


//App.js 中对应取值。
 attachNumber(){
        let num = Number(this.refs.numberText.value);
        this.props.actions.attachNumber(num);
    }

    render(){
        return <div>
            <h1>{this.props.v}</h1>
            <button onClick={()=>{
                this.props.actions.add()
            }}>按我加1</button>
            <br />
            <input type="text" ref="numberText" />
            <input type="button" value="增加特定数" onClick={
            (this.attachNumber).bind(this)}/>

        </div>
    }

参考： 

阮一峰： http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
https://www.jianshu.com/p/5b3f874cd7a9
中介者模式： https://blog.csdn.net/qq3965470/article/details/52304399