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