摘要：簡介是一個狀態(tài)管理的庫，由基礎(chǔ)上開發(fā)出來，與的主要區(qū)別是只有一個，關(guān)于，后文會詳述。這個函數(shù)接受四個參數(shù)，它們分別是，，和。之前在注冊頁面，如果沒有滿足相關(guān)條件，則觸發(fā)的行為。具體定義了項目中觸發(fā)的行為類別，通過屬性來區(qū)別于不同的行為。

redux是一個js狀態(tài)管理的庫，由flux基礎(chǔ)上開發(fā)出來，與flux的主要區(qū)別是只有一個store，關(guān)于store，后文會詳述。在各大框架中均可使用，當(dāng)然各個框架也有自己再度封裝的狀態(tài)管理庫，如angular的ngrx，vue的vuex，而本文主要介紹的是react的react-redux。

本次演示的示例，是一個微信注冊頁面，主要想通過react-redux實現(xiàn)的功能是，當(dāng)輸入不合法的注冊信息時，頂部出現(xiàn)錯誤提示信息，即：

通過路由進入主頁面，主頁面渲染的dom代碼為：

 render() {
        // 這個組件是一個包裹組件，所有的路由跳轉(zhuǎn)的頁面都會以this.props.children的形式加載到本組件下
     const {msg} = this.props;
        return (
            

                
{msg.text}
                
{this.props.children}
            
        );
    }

可以看到主頁面比更沒有直接寫入注冊頁面，而由錯誤提示部分加子路由入口組成，注冊頁面是通過子路由嵌套進來的，而又因為react的數(shù)據(jù)沒有向上回溯的能力（即單項數(shù)據(jù)流），因此這里選擇狀態(tài)管理的方式去顯示錯誤提示信息。

最初看文檔的時候，有一種體驗，就是各個模塊（action,reducer,store）等等，都看明白了，但是具體想去完成功能的時候還是一臉懵逼，不知道如何下手，于是這次為了去更好的講解示例，我決定反著來，先從示例入手，再去引出那些概念。

從之前主頁面的代碼可以看到，錯誤信息的顯示是由組件的props傳進來的，而主頁面是如何獲取相關(guān)的props的呢，答案是通過一個connect的函數(shù)。

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connect是react組件做狀態(tài)管理的核心，它將組件和redux中的所有狀態(tài)值連接起來。這個函數(shù)接受四個參數(shù)，它們分別是 mapStateToProps，mapDispatchToProps，mergeProps和options。

第一個參數(shù)是獲取redux倉庫中的值的一個函數(shù)。為了方便快速理解，我們可以簡單粗暴的認(rèn)為他是js中g(shù)etter，setter中的getter，這是一個用來從redux中獲取值的函數(shù)，這個函數(shù)返回的值，可以在當(dāng)前組件的props中拿到。

比如現(xiàn)在主頁面需要知道，當(dāng)前redux倉庫中是否顯示錯誤提示的相關(guān)信息時，有如下代碼：

const mapStateToProps = (state) => {
    return {
        msg: state.tipMsg,//取reducer中的tipMsg
    }
}

export default connect(mapStateToProps)(Main);

state就是redux中儲存值的大對象，而現(xiàn)在需要的錯誤信息就是存儲在tipMsg的字段當(dāng)中。因為在主頁面只會取值，而不會設(shè)置值，因此connect只需要這一個函數(shù)足夠。

ownProps這里還可以穿第二個參數(shù)，第二個參數(shù)特指當(dāng)前組件的props，可以用來做信息對比。本例沒有用到。

如果說mapStateToProps是一個getter的話，那么mapDispatchToProps就是一個setter，他觸發(fā)了redux的相關(guān)行為，使得rudex可以保存記錄一些你想要記錄改變的狀態(tài)和值。

具體到本例中，觸發(fā)redux行為的操作在注冊頁面，因此注冊頁面添加如下代碼：

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        showTip: showTip//第二個showTip是一個action
    }, dispatch);
}

export default connect((state) => state, mapDispatchToProps)(Main);

可以看到當(dāng)注冊頁面執(zhí)行showTip的函數(shù)時，就會觸發(fā)redux中的showTip的操作，這個操作是提前定義好的。這里有兩個showTip，第一個是指當(dāng)前頁面的函數(shù)名，第二個是指redux中定義好的行為，這兩個showTip沒有必要的聯(lián)系，只是作為一個關(guān)系映射，名字可以不一樣。

這個參數(shù)的作用是表示把redux中的props（即當(dāng)中存儲的值）和當(dāng)前組件的props做合并，默認(rèn)都是要合并的，可以忽略這個屬性。

一個配置項屬性，可以做相關(guān)的配置。自行翻譯吧~。
[options] (Object) If specified, further customizes the behavior of the connector.

[pure = true] (Boolean): If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps, preventing unnecessary updates, assuming that the component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Defaults to true.

[withRef = false] (Boolean): If true, stores a ref to the wrapped component instance and makes it available via getWrappedInstance() method. Defaults to false.

這個就是之前一直提到的redux的倉庫。redux的管理的數(shù)據(jù)都存儲在store中。
我們只需要知道，store就是一個存儲倉庫，react-redux只有一個store，所有的東西都存在這里，想要在react組件中用他首先需要去根頁面把它注入進去。需要在根節(jié)點寫入如下代碼：

import React from "react"; 
import {render} from "react-dom"; // 渲染組件時需要
import {Provider} from "react-redux"; // react和redux連接的橋梁，就是這個Provider
import store from "./redux/store/store"; // 引入sotre
import route from "./router/route"; // 所有定義好的路由

// 創(chuàng)建根組件
render(
    
        {route}
    ,
    document.body.appendChild(document.createElement("div"))
);

這是鏈接redux，使組件可以訪問倉庫的基礎(chǔ)。

export const showTip = (item) => {
    return {
        type: "SHOW_TIP",
        item
    }
}

之前在注冊頁面，如果沒有滿足相關(guān)條件，則觸發(fā)redux的行為。而這個行為就是action。action具體定義了項目中觸發(fā)的行為類別，通過type屬性來區(qū)別于不同的行為。對應(yīng)到connect的函數(shù)參數(shù)中，就是mapDispatchToProps需要去save或者說change什么樣的行為。

const tipMsg = (state = {text: "", show: false}, action) => {
    switch (action.type) {
        case "SHOW_TIP":
            return Object.assign({}, {
                text: action.item.text,
                show: action.item.show
            });
        default:
            return state;
    }
}

一個純函數(shù)，通過判斷是什么樣的行為，來對相關(guān)的state做更改，這中間是不含任何變量的，即只要確定輸入，就能知道輸出。在mapStateToProps這個取值函數(shù)中，取的也就是相關(guān)reducer中返回的值。
觸發(fā)相關(guān)action后的主頁控制臺：

至此，就完成了react-redux對于父子組件的通信，由子組件向上推送信息至父組件，觸發(fā)相關(guān)的操作。

項目地址：https://github.com/jiwenjiang...
（ps：注意此項目由yarn管理，而不是npm）