react-redux 開發實踐與學習分享

redux簡介

redux是一個js狀態管理的庫，由flux基礎上開發出來，與flux的主要區別是隻有一個store，關於store，後文會詳述。在各大框架中都可使用，固然各個框架也有本身再度封裝的狀態管理庫，如angular的ngrx，vue的vuex，而本文主要介紹的是react的react-redux。

示例介紹

本次演示的示例，是一個微信註冊頁面，主要想經過react-redux實現的功能是，當輸入不合法的註冊信息時，頂部出現錯誤提示信息，即：

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

render() {
        // 這個組件是一個包裹組件，全部的路由跳轉的頁面都會以this.props.children的形式加載到本組件下
     const {msg} = this.props;
        return (
            <div className="container">
                <div ref="test" className="weui-toptips weui-toptips_warn"
                     style={{'display': msg.show ? 'block' : 'none'}}>{msg.text}</div>
                <div className="page">{this.props.children}</div>
            </div>
        );
    }

能夠看到主頁面比更沒有直接寫入註冊頁面，而由錯誤提示部分加子路由入口組成，註冊頁面是經過子路由嵌套進來的，而又由於react的數據沒有向上回溯的能力（即單項數據流），所以這裏選擇狀態管理的方式去顯示錯誤提示信息。

開講react-rudex

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

關聯rudex和頁面組件-connect

從以前主頁面的代碼能夠看到，錯誤信息的顯示是由組件的props傳進來的，而主頁面是如何獲取相關的props的呢，答案是經過一個connect的函數。

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

connect是react組件作狀態管理的核心，它將組件和redux中的全部狀態值鏈接起來。這個函數接受四個參數，它們分別是 mapStateToProps，mapDispatchToProps，mergeProps和options。

mapStateToProps(state, ownProps)

第一個參數是獲取redux倉庫中的值的一個函數。爲了方便快速理解，咱們能夠簡單粗暴的認爲他是js中getter，setter中的getter，這是一個用來從redux中獲取值的函數，這個函數返回的值，能夠在當前組件的props中拿到。

好比如今主頁面須要知道，當前redux倉庫中是否顯示錯誤提示的相關信息時，有以下代碼：

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

export default connect(mapStateToProps)(Main);

state就是redux中儲存值的大對象，而如今須要的錯誤信息就是存儲在tipMsg的字段當中。由於在主頁面只會取值，而不會設置值，所以connect只須要這一個函數足夠。

ownProps這裏還能夠穿第二個參數，第二個參數特指當前組件的props，能夠用來作信息對比。本例沒有用到。

mapDispatchToProps(dispatch, ownProps)

若是說mapStateToProps是一個getter的話，那麼mapDispatchToProps就是一個setter，他觸發了redux的相關行爲，使得rudex能夠保存記錄一些你想要記錄改變的狀態和值。

具體到本例中，觸發redux行爲的操做在註冊頁面，所以註冊頁面添加以下代碼：

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

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

能夠看到當註冊頁面執行showTip的函數時，就會觸發redux中的showTip的操做，這個操做是提早定義好的。這裏有兩個showTip，第一個是指當前頁面的函數名，第二個是指redux中定義好的行爲，這兩個showTip沒有必要的聯繫，只是做爲一個關係映射，名字能夠不同。

mergeProps(stateProps, dispatchProps, ownProps)

這個參數的做用是表示把redux中的props（即當中存儲的值）和當前組件的props作合併，默認都是要合併的，能夠忽略這個屬性。

options

一個配置項屬性，能夠作相關的配置。自行翻譯吧~。
[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.

store

這個就是以前一直提到的redux的倉庫。redux的管理的數據都存儲在store中。
咱們只須要知道，store就是一個存儲倉庫，react-redux只有一個store，全部的東西都存在這裏，想要在react組件中用他首先須要去根頁面把它注入進去。須要在根節點寫入以下代碼：

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'; // 全部定義好的路由

// 建立根組件
render(
    <Provider store={store}>
        {route}
    </Provider>,
    document.body.appendChild(document.createElement('div'))
);

這是連接redux，使組件能夠訪問倉庫的基礎。

action

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

以前在註冊頁面，若是沒有知足相關條件，則觸發redux的行爲。而這個行爲就是action。action具體定義了項目中觸發的行爲類別，經過type屬性來區別於不一樣的行爲。對應到connect的函數參數中，就是mapDispatchToProps須要去save或者說change什麼樣的行爲。

reducer

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

一個純函數，經過判斷是什麼樣的行爲，來對相關的state作更改，這中間是不含任何變量的，即只要肯定輸入，就能知道輸出。在mapStateToProps這個取值函數中，取的也就是相關reducer中返回的值。
觸發相關action後的主頁控制檯：

至此，就完成了react-redux對於父子組件的通訊，由子組件向上推送信息至父組件，觸發相關的操做。

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