[[347940]]

下面，就寫一下我自己對 redux 和 React-redux 的學(xué)習(xí)以及使用的心得，權(quán)當是對學(xué)習(xí)過程的一種記錄和分享。

一、redux和React-redux的幾個重要概念
1.1 action
Action 是把數(shù)據(jù)從應(yīng)用（這里之所以不叫 view 是因為這些數(shù)據(jù)有可能是服務(wù)器響應(yīng)，用戶輸入或其它非 view 的數(shù)據(jù) ）傳到 store 的有效載荷。它是 store 數(shù)據(jù)的唯一來源。一般來說你會通過 store.dispatch() 將 action 傳到 store。

1.2 reducer
Reducers 指定了應(yīng)用狀態(tài)的變化如何響應(yīng) actions并發(fā)送到 store 的，記住 actions 只是描述了有事情發(fā)生了這一事實，并沒有描述應(yīng)用如何更新 state。

1.3 store
store就是把action和reducer聯(lián)系到一起的對象，store本質(zhì)上是一個狀態(tài)樹，保存了所有對象的狀態(tài)。任何UI組件都可以直接從store訪問特定對象的狀態(tài)。

在 Redux 中，所有的數(shù)據(jù)（比如state）被保存在一個store容器中 ，在一個應(yīng)用程序中只能有一個store對象。當一個store接收到一個action，它將把這個action代理給相關(guān)的reducer。reducer是一個純函數(shù)，它可以查看之前的狀態(tài)，執(zhí)行一個action并且返回一個新的狀態(tài)。

1.4 Provider
Provider 其實就只是一個外層容器，它的作用就是通過配合 connect 來達到跨層級傳遞數(shù)據(jù)。使用時只需將Provider定義為整個項目最外層的組件，并設(shè)置好store。那么整個項目都可以直接獲取這個store。它的原理其實是通過React中的[Context]()來實現(xiàn)的。它大致的核心代碼如下：

import React, {Component} from 'react' 
import {PropTypes} from 'prop-types' 
 
export default class Provider extends Component { 
    getChildContext() { 
        return {store: this.props.store} 
    } 
 
    constructor() { 
        super() 
 
        this.state = {} 
    } 
 
    render() { 
        return this.props.children 
    } 
} 
 
Provider.childContextTypes = { 
    store: PropTypes.object 
} 

1.5 connect
connect 的作用是連接React組件與 Redux store，它包在我們的容器組件的外一層，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，傳給一個構(gòu)造函數(shù)，返回一個對象，以屬性形式傳給我們的容器組件。

它共有四個參數(shù)mapStateToProps, mapDispatchToProps, mergeProps以及options。

mapStateToProps 的作用是將store里的state（數(shù)據(jù)源）綁定到指定組件的props中 mapDispatchToProps 的作用是將store里的action（操作數(shù)據(jù)的方法）綁定到指定組件的props中 另外兩個方法一般情況下使用不到，這里就不做介紹。。

那么 connect 是怎么將React組件與 Redux store連接起來的呢？其主要邏輯可以總結(jié)成以下代碼：

import {Component} from "react"; 
import React from "react"; 
import {PropTypes} from 'prop-types' 
 
const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent => { 
    class Connect extends Component { 
        constructor() { 
            super() 
 
            this.state = {} 
 
        } 
 
        componentWillMount() { 
            this.unSubscribe = this.context.store.subscribe(() => { 
                this.setState(mapStateToProps(this.context.store.getState())) 
            }) 
        } 
 
        componentWillUnmount() { 
            this.unSubscribe() 
        } 
 
        render() { 
            return <WrappedComponent  {...this.state} 
                                      {...mapDispatchToProps(this.context.store.dispatch)}/> 
        } 
    } 
 
    Connect.contextTypes = { 
        store: PropTypes.object 
    } 
    return Connect 
}) 
 
export default connect 

二、redux和React-redux的使用
項目中關(guān)于redux的文件夾目錄如下

拿管理用戶信息數(shù)據(jù)的需求來舉例

第一步，編寫操作用戶信息的action

import {USER_INFO} from "../constants/actionTypes"; 
import store from '../store/store' 
 
export const switchUser = (data) => { 
    console.log("switchUser()",data); 
    return () => { 
        store.dispatch({ 
            type: USER_INFO, 
            ...data 
        }) 
    } 
} 

第二步，編寫改變用戶信息并返回新state的reducer

import {USER_INFO} from "../constants/actionTypes"; 
 
const redUserInfo = (state = { 
    userId: 10001, 
    userName: '', 
    userOpenid: '', 
    userPhone: '', 
    userRole: 0 
}, action) => { 
    if (action === undefined) { 
        return state 
    } 
 
    switch (action.type) { 
        case USER_INFO: 
            return { 
                ...state, 
                ...action 
            } 
        default: 
            return state 
    } 
 
} 

第三步，完成store的創(chuàng)建

import {createStore} from 'redux' 
import reducers from '../reducers/index' 
 
let store = createStore(reducers) 
 
export default store 

第四步，獲取用戶信息

//配置代碼，通過connect將組件和store連接起來 
let mapStateToProps = (state) => ({ 
    userInfo: {...state.redUserInfo} 
}) 
 
let mapDispatchToProps = (dispatch) => ({}) 
 
export default connect(mapStateToProps, mapDispatchToProps)(PageClass) 
 
//通過props獲取用戶信息 
this.props.userInfo 

第五步，修改用戶信息

import {switchUser} from '../../redux/actions/userInfo' 
 
switchUser({ 
    userId: 10001, 
    userName: '', 
    userOpenid: '', 
    userPhone: '', 
    userRole: 2 
})(); 

至此就完成了redux+React-redux的一個簡單使用流程