Redux

Redux is a predictable state container for JavaScript apps.

Redux是一個js應用的可預測狀態容器。

Redux是根據Flux改進的一個狀態管理器，主要用於處理跨層級元件通訊的問題。

Redux有三大原則：

整個應用的state被儲存在單個的物件樹中（store）；狀態是只讀的，只能通過actions改變狀態；使用純函式進行更改狀態(reducer)。Store

Store主要有四個方法：

getState()：獲取當前的statedispatch(action)：發出一個actionsubscribe(listener)：新增一個監聽器createStore(reducer, [preloadedState], [enhancer])：建立store

在建立一個Store時可以新增中介軟體，如redux-thunk用於非同步獲取資料，redux-devtools-extension瀏覽器除錯工具等。

redux-thunk和redux-devtools-extension使用：

import { composeWithDevTools } from 'redux-devtools-extension'import thunk from 'redux-thunk'const middleware = [ thunk ]if (process.env.NODE_ENV !== 'production') { middleware.push(createLogger())}const store = createStore( reducer, composeWithDevTools(applyMiddleware(...middleware)))

在專案中新增redux-devtools-extension後再開發者除錯工具中就會多出一個redux的選項。

redux-devtools-extension

Reducer

reducer是一個純函式，大致如下：

(preState, action) => newState

禁止在reducer中修改傳入引數；禁止執行有副作用的操作；禁止呼叫非純函式。

React的思想是將頁面抽象為一個個元件，當兩個元件是相互獨立時，應該為每個元件建立單獨的reducer，最後使用combineReducers()將多個reducer合併。

react-redux

react-redux只有兩個API。

react使用react-redux來繫結redux。將根元件包裹在<Provider>中，將store作為props傳入，使專案中的任何元件都可以使用store。然後使用connect()函式真正的連線react的元件和redux的store。

export default connect(mapStateToProps)(App)

connect有四個引數：

mapStateToPropsmapDispatchToPropsmergePropsoptions

1、mapStateToProps(atate, ownProps)允許我們將store中的資料作為props繫結到元件上。

第一個引數為Redux的store，第二個引數為App元件自身的引數。當store或ownProps發生變化時，mapStateToProps()函式會被呼叫，得出一個新的state，傳遞給App元件。

2、mapDispatchToProps(dispatch, ownProps)是將action作為props繫結到元件上。

Redux本身提供了bindActionCreators函式，將action包裝成直接可被呼叫的函式，即呼叫該函式就會觸發dispatch。

3、mergeProps(stateProps, dispatchProps, ownProps)

不管是stateProps還是dispatchProps，都需要和ownProps merge之後才會賦值給App，該函式實現了這個功能。但不傳遞該引數也可以，connect會使用Object.assign方法代替。

4、options

總結

redux的工作流程：

1、頁面產生互動性行為，發出action；

store.dispatch(action)

2、Store呼叫Reducer；

var nextState = todoApp(preState, action)

3、State一旦有變化，Store就會呼叫監聽函式。

store.subscribe(listener)

4、listener通過store.getState()獲取狀態，React可以觸發重新渲染檢視。