徹底弄懂React Redux元件通訊

為了方便使用，redux的作者封裝了乙個react專用的庫react-redux，講解之前，先來了解一下什麼是容器元件和傻瓜元件？

react-redux把元件分為容器元件和傻瓜元件（ui元件）。

容器元件，負責和redux store打交道的元件，處於外層。

功能：和redux store打交道，讀取store的狀態，用於初始化元件的狀態，同時還要監聽store的狀態改變；當store狀態發生變化時，需要更新元件狀態，從而驅動元件重新渲染；當需要更新store狀態時，就會派發action物件。

特徵：傻瓜元件也叫做ui元件，只專心負責渲染介面的元件，處於內層。

功能：根據當前props和state，渲染出使用者介面。

特徵：簡單一句話：ui元件負責ui的呈現，容器元件負責管理資料和邏輯。

下邊是容器元件和傻瓜元件的分工圖：

react-redux提供了兩個最主要的功能：

語法如下：

export default connect(
mapstatetoprops,
mapdispatchtoprops
)(home)

接收兩個引數mapstatetoprops和mapdispatchtoprops，執行結果依然是乙個函式，所以才在最後又加乙個圓括號，把connect函式執行的結果立即執行，這一次引數是home這個傻瓜元件。

這裡有兩次函式執行，第一次是connect函式的執行，第二次是把connect函式返回的函式再次執行，最後產生的就是容器元件。

作為容器元件，要做的工作無外乎兩件事：

乙個是內層傻瓜物件的輸入，乙個是內層傻瓜物件的輸出。

因此，connect的完整api如下：

import  from 'react-redux'
export default connect(
mapstatetoprops,
mapdispatchtoprops
)(home)

mapstatetoprops是乙個函式，它建立乙個從外部的state物件到ui元件的props物件的對映關係。

function mapstatetoprops(state) 
}

上面**中，mapstatetoprops是乙個函式，接受state作為引數，返回乙個物件。這個物件有乙個number屬性，代表ui元件的同名引數，後面的count也是乙個函式，可以從state算出number的值。

下面就是count的乙個例子：

import  from 'redux'
const initialstate=;
function update(state = initialstate, action) ;
case 'decrease':
console.log("decrease");
console.log(state);
return ;
default:
return state;
}}export default combinereducers()

mapstatetoprops會訂閱store，每當state更新的時候，就會自動執行，重新計算ui元件的引數，從而觸發ui元件的重新渲染。

mapstatetoprops的第乙個引數總是state物件，還可以使用第二個引數，代表容器元件的props物件。

const mapstatetoprops = (state, ownprops) => 
}

使用ownprops作為引數後，如果容器元件的引數發生變化，也會引發ui元件重新渲染。

mapdispatchtoprops是connect函式的第二個引數，用來建立ui元件的引數到store.dispatch方法的對映。也就是說，它定義了哪些使用者操作應該當做action傳給store。

function mapdispatchtoprops(dispatch) 
}

connect方法生成容器元件以後，需要讓容器元件拿到state物件，才能生成ui元件的引數。

provider就是把我們用redux建立的store傳遞到內部的其他元件，讓內部元件可以享有這個store並提供對state的更新。

import react,  from 'react';
import  from 'redux'
import  from 'react-redux'
import  from 'react-router-dom';
import  from 'react-router'
import reducers from '../reducer/index.js'
import  home from '../views/home.js'
import  another from '../views/another.js'
const store = createstore(reducers);
export default class routerindex extends component 
}

文中主要用到了react-redux和react-router兩個外掛程式

原始碼見：

徹底弄懂React Redux元件通訊

徹底弄懂session，cookie，token

徹底弄懂 Unicode 編碼

徹底弄懂Redis set篇

徹底弄懂React Redux元件通訊

徹底弄懂session，cookie，token

徹底弄懂 Unicode 編碼

徹底弄懂Redis set篇

相關推薦