當一個react項目組件層級越來越深,頁面越來越多的時候,數據在各個組件層級和頁面之間傳遞的需求就會比較多,很多變量也需要做成可全局管理的。在這個時候,redux和react-redux的使用就很有必要了。它們能幫助我們很方便的進行項目全局性的數據管理。
下面,就寫一下我自己對 redux 和 React-redux 的學習以及使用的心得,權當是對學習過程的一種記錄和分享。
一、redux和React-redux的幾個重要概念
1.1 action
Action 是把數據從應用(這裏之所以不叫 view 是因爲這些數據有可能是服務器響應,用戶輸入或其它非 view 的數據 )傳到 store 的有效載荷。它是 store 數據的唯一來源。一般來說你會通過 store.dispatch()
將 action 傳到 store。
1.2 reducer
Reducers 指定了應用狀態的變化如何響應 actions併發送到 store 的,記住 actions 只是描述了有事情發生了這一事實,並沒有描述應用如何更新 state。
1.3 store
store就是把action和reducer聯繫到一起的對象,store本質上是一個狀態樹,保存了所有對象的狀態。任何UI組件都可以直接從store訪問特定對象的狀態。
在 Redux 中,所有的數據(比如state)被保存在一個store容器中 ,在一個應用程序中只能有一個store對象。當一個store接收到一個action,它將把這個action代理給相關的reducer。reducer是一個純函數,它可以查看之前的狀態,執行一個action並且返回一個新的狀態。
1.4 Provider
Provider 其實就只是一個外層容器,它的作用就是通過配合 connect 來達到跨層級傳遞數據。使用時只需將Provider定義爲整個項目最外層的組件,並設置好store。那麼整個項目都可以直接獲取這個store。它的原理其實是通過React中的[Context]()來實現的。它大致的核心代碼如下:
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,傳給一個構造函數,返回一個對象,以屬性形式傳給我們的容器組件。
它共有四個參數mapStateToProps, mapDispatchToProps, mergeProps以及options。
mapStateToProps 的作用是將store裏的state(數據源)綁定到指定組件的props中
mapDispatchToProps 的作用是將store裏的action(操作數據的方法)綁定到指定組件的props中
另外兩個方法一般情況下使用不到,這裏就不做介紹。。
那麼 connect 是怎麼將React組件與 Redux store連接起來的呢?其主要邏輯可以總結成以下代碼:
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的使用
項目中關於redux的文件夾目錄如下
拿管理用戶信息數據的需求來舉例
第一步,編寫操作用戶信息的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的創建
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的一個簡單使用流程