React 快速上手 5 掌握Redux 2

本文部分內容參考阮一峰的redux教程。

react-redux執行機制

我覺得這張圖清楚地描述react-redux的執行機制：

react-redux將元件劃分為兩類，第一類是ui元件：

比如，我們的例項計數器就是乙個ui元件，我們只寫了ui的呈現規則，並且所有資料都是由this.props提供：

class counter extends react.component  = this.props;
return(
提交 )
}}

第二類元件是容器元件：

不過，react-redux 規定，所有的 ui 元件都由使用者提供，容器元件則是由 react-redux 自動生成。

connect負責從ui元件生成容器元件

如下，一行語句，我們就將獲得由ui元件得到的容器元件

這個函式由兩個引數，mapstatetoprops和mapdispatchtoprops構成。它們主要定義業務邏輯，前者負責輸入邏輯，即容器元件如何將state轉換為props交給ui元件，來供容器元件進行ui渲染。後者負責輸出邏輯，用來建立 ui 元件的引數到store.dispatch方法的對映。

如下，我們定義mapstatetoprops，它將state中的count欄位取出對映到value屬性，然後交給ui元件：

function mapstatetoprops(state) 
}

然後，我們定義mapdispatchtoprops，他將store.dispatch方法對映到onsubmitclick屬性上，這樣ui元件通過props.onsubmitclick，就可以間接呼叫store.dispatch，實現狀態更新。

function mapdispatchtoprops(dispatch) )
}}

connect方法生成容器元件以後，需要讓容器元件拿到state物件，才能生成 ui 元件的引數。一種解決方法是將state物件作為引數，傳入容器元件。但是，這樣做比較麻煩，尤其是容器元件可能在很深的層級，一級級將state傳下去就很麻煩。

react-redux 提供provider元件，可以讓容器元件拿到state。

import  from 'react-redux'
import from 'redux'
render(
document.getelementbyid('root')
)

import react,  from 'react'
import proptypes from 'prop-types'
import reactdom from 'react-dom'
import from 'redux'
import from 'react-redux'
// react component
class counter extends component = this.props
return (
increase)}}
counter.proptypes = 
// action
const increaseaction = 
// reducer
function counter(state = , action) 
default:
return state
}}// store
const store = createstore(counter)
// map redux state to component props
function mapstatetoprops(state) 
}// map redux actions to component props
function mapdispatchtoprops(dispatch) 
}// connected component
mapstatetoprops,
mapdispatchtoprops
)(counter)
reactdom.render(
document.getelementbyid('root')
)

React 快速上手 5 掌握Redux 2

React 快速上手 2 元件通訊

html5之快速上手canvas

ibatis 快速上手

React 快速上手 5 掌握Redux 2

React 快速上手 2 元件通訊

html5之快速上手canvas

ibatis 快速上手

相關推薦