[[347940]]

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

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

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

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

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

1.4 Provider
Provider 其實(shí)就只是一個(gè)外層容器，它的作用就是通過(guò)配合 connect 來(lái)達(dá)到跨層級(jí)傳遞數(shù)據(jù)。使用時(shí)只需將Provider定義為整個(gè)項(xiàng)目最外層的組件，并設(shè)置好store。那么整個(gè)項(xiàng)目都可以直接獲取這個(gè)store。它的原理其實(shí)是通過(guò)React中的[Context]()來(lái)實(shí)現(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è)構(gòu)造函數(shù)，返回一個(gè)對(duì)象，以屬性形式傳給我們的容器組件。

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

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

那么 connect 是怎么將React組件與 Redux store連接起來(lái)的呢？其主要邏輯可以總結(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的使用
項(xiàng)目中關(guān)于redux的文件夾目錄如下

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

第一步，編寫(xiě)操作用戶(hù)信息的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 
        }) 
    } 
} 

第二步，編寫(xiě)改變用戶(hù)信息并返回新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 

第四步，獲取用戶(hù)信息

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

第五步，修改用戶(hù)信息

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

至此就完成了redux+React-redux的一個(gè)簡(jiǎn)單使用流程