Redux

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

http://cn.redux.js.org/docs/api/applyMiddleware.html

也參考《深刻React技術棧》

Redux是Flux的實現，或者說Redux參考了Flux的設計。Redux是一個包，提供了一些api讓咱們方便建立store、更新數據等，簡化咱們的操做。

Flux解決了MVC的侷限性，Redux也遵循Flux的這個特色，因此使用Redux的原則就是一個應用的數據都存放在單一的數據源Store中（太大的話能夠經過combineReducers來進行拆分），這解決了MVC 多個model，數據流混亂的問題，並且單個數據源的話，方便持久化。

在Flux中，要求store是隻讀的（只容許內部對store進行修改），也就是沒有給外界提供setter方法，在Redux中，更加發揚這種只讀的特性，修改狀態都是在reducer中返回一個全新的state，而不會對原來的state進行修改

Redux = Reduce + Flux。因此在Redux中對這二者的理解十分重要

重申一下redux和flux在應用上的區別：

　　redux：調用storeA.dispatch，storeA中的reducer會被觸發執行，而storeB中的reducer不會執行。

　　Flux：調用Dispatcher.dispatch方法，全部store在上面register的方法都會執行

 

由於store中的state表明整個應用程序的狀態，而修改state，必須經過dispatch(Action)來實現，也就是說每次改變對應一個action，只須要跟蹤action，便可跟蹤整個程序的狀態變化

Store

import { createStore } from 'redux'; const store = createStore(reducer);

在View中調用dispatch發送action

store.dispatch({ type: 'ADD_TODO', payload: 'Learn Redux' }); // 使用Action Creator
store.dispatch(addTodo('Learn Redux'));

查看 這裏 ，store表明了整個應用程序的狀態，而狀態的初始化固然也是在store中進行處理，有兩種方式：

1. 指定reducer中的state參數默認值，store被建立的時候，這個reducer會被執行一次，reducer內咱們把這個默認值返回返回便可
2. 指定createStore的第二個參數，這個參數表明默認值，這種方式指定的優先級比以上默認值方式更高，即這個值會在初始化的時候被傳遞進reducer的state。

以上兩種方式的本質都是要求reducer返回一個初始值，只不過這個初始值多是默認值而已。

reducer

這個函數的職責就是根據當前state以及action，計算出下一個新的狀態new_state，若是不須要發生變化，則返回原state便可

建立Store的時候，須要傳入一個函數做爲Store的Reducer。以上dispatch以後，這個Action就會被傳入到這個Store中的reducer進行處理，返回一個新的state

const reducer = function (state, action) { // ...
  return new_state; };

對於程序的初始狀態，能夠這麼進行設置（在執行createStore的時候，reducer會被首次執行用於獲取初始狀態，顯然這個時候store沒有任何狀態，因此應該給state設置一個默認值，做爲初始狀態）：

const reducer = (state = defaultState, action) => { switch (action.type) { case 'ADD': return state + action.payload; default: return state; } };

規範要求Reducer是一個純函數，不能對輸入數據進行修改，並且相同的輸入對應相同的輸出（更加方便測試）。因此必需要返回一個全新的對象，手段以下：

function reducer(state, action) { return Object.assign({}, state, { thingToChange }); return { ...state, ...newState }; return [...state, newItem]; }

以上reduce返回了一個不一樣的對象（state），就表明界面須要刷新，由於狀態發生變化了。這須要在view中對store進行監聽：

store.subscribe(listener);

在以上的listener中調用setState便可。

回顧以上的邏輯（調用了Store的subscribe、getState和dispatch方法）：

　　在模塊中建立store，view引入這個模塊，進行store.subscrible註冊監聽。

　　在註冊的回調函數中，先調用store.getState獲取到最新的狀態，而後把數據經過setState更新到界面上（View模板中經過this.state.xx獲取數據）

　　用於與view發生交互，view調用store.dispatch，而後store中的reducer被執行，返回一個新的state，以上的監聽就會被觸發

Reducer拆分

以上能夠發現一個store中對狀態的修改所有集中在reduce函數中，有必要對這個函數進行拆分

const chatReducer = (state = defaultState, action = {}) => { return { chatLog: chatLog(state.chatLog, action), statusMessage: statusMessage(state.statusMessage, action), userName: userName(state.userName, action) } };

可見以上的state中有3個字段，每一個字段的值都經過一個函數的返回值來決定，在這個函數中進行action.type的判斷，再進行數據修改，返回最新的值。

這個過程可使用Redux提供的語法糖combineReducers進行更改（這裏使用了對象的簡潔寫法）：

const chatReducer = combineReducers({ chatLog, statusMessage, userName })

Reducer的複用

　　以上使用combineReducers的時候，可能會遇到一個問題，如chatLog與statusMessage中對數據的處理邏輯很相似，怎麼把這兩個函數中的邏輯抽取出來呢？

　　假如這兩部分直接使用相同的函數，這會形成一個問題，即這兩個屬性對於相同的action，返回的數據是一致的（由於調用的是同一個函數，裏面對action.type的判斷以及數據處理是徹底一致的），即會同時相同改變。這不是咱們想要的。

　　這時可使用一個函數（高階reducer）來生成這些須要被複用的reducer，而後經過參數來控制這些reducer的差別，實現返回的reducer內部邏輯大部分相同，但存在差別。如爲裏面判斷的action.type添加一個前綴

State

一個view和一個state相互對應

const state = store.getState();

Action

用戶與View發生交互，View發出Action，觸發State的變化（由於State是從Store中獲取的，因此也能夠說成Store發生變化）

const action = { type: 'ADD_TODO', payload: 'Learn Redux' };

Action Creator簡化Action的生成

function addTodo(text) { return { type: ADD_TODO, text } } const action = addTodo('Learn Redux');

中間件

分析以上過程能夠發現，Dispatch到reduce之間的細節被封裝到Redux框架內部，假如我但願在執行dispatch的時候先進行一些操做，後執行reduce或者說要加強dispatch。這就須要用到中間件。

使用Flux架構進行開發，會遇到一個問題，糾結在哪裏處理異步，哪裏發請求，這是由於Flux沒有規定在哪裏進行異步請求（感受其實也能夠這樣，在action creator中調用dispatch以前進行異步請求，有告終果以後再進行dispatch action 告知結果）。而redux在這點上提供瞭解決方案，使用中間件加強dispatch，使其能夠處理異步請求。

手動實現一個日誌中間件

let next = store.dispatch; store.dispatch = function dispatchAndLog(action) { console.log('dispatching', action); next(action); console.log('next state', store.getState()); }

redux-thunk

thunk返回一個接收 ‘ dispatch’ 的函數Fn，在Fn中進行異步操做，返回promise，在這個promise上註冊的回調函數中能夠調用dispatch，使用的方式以下：

// thunk
function makeASandwichWithSecretSauce(forPerson) { return function (dispatch,getState) { return fetchSecretSauce().then( sauce => dispatch(makeASandwich(forPerson, sauce)), error => dispatch(apologize('The Sandwich Shop', forPerson, error)) ) } } // Thunk middleware 可讓咱們像 dispatch 普通 action // 同樣 dispatch 異步的 thunk action。
store.dispatch( makeASandwichWithSecretSauce('Me') )

本質就是thunk返回的函數中返回一個promise，在這個promise的異步操做中調用dispatch，能夠發送action。

React-redux

redux不必定要配合react來使用，更加通用。而react-redux提供了api幫助react和redux進行綁定

瞭解容器型組件和展現型組件 。容器組件由React-Redux生成，即狀態所有交由框架來管理。

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

基本的用法就是最外層一個provider，接着就是容器組件，這個容器組件是經過react-redux的connect生成的，connect爲這個容器組件中的全部子組件提供了訪問store的功能，connect幫助store與組件創建關聯（state映射到props），即經過組件內的props能夠獲取到store中state的值，以及當state發生變化，組件會自動從新渲染（connect中mapStateToProps(state)和mapDispatchProps(dispatch)也會從新執行，即從新執行映射），而這些功能都在Container中作好了。

這裏記錄一些使用要點：

　　首先定義一個展現型組件（無狀態組件），裏面UI的回調函數以及要展現的數據都是經過props獲取的
　　經過connect根據展現型組件生成一個容器組件，還須要函數mapStateToProps(state)和mapDispatchProps(dispatch)，前者用於把傳入的state（第一次執行的話這個state就是來源於store的初始state，有兩種方法能夠指定），映射成props對象屬性返回，這裏用到的state是經過store.getState獲取，而store後面會傳入；後者也是用於定義props對象屬性返回，這不過這些屬性都是函數，用於被容器中的子組件調用，在這些函數中調用dispatch發送action，或者這些函數中直接返回一個action，也會被自動發送。

　　以上建立完成容器組件以後，接着經過createStore(reducer)建立store，根據以往的理解，接下來須要經過store.subscrible進行監聽，若是reducer返回的state發生變化，則回調函數會被執行，裏面執行setState觸發從新渲染。但這個監聽的步驟在react-redux中已經作好了，在容器組件被實例化的時候，會獲取外部的store（後面會說道怎麼把store傳給容器組件），而後進行監聽，已經從新渲染等操做。

　　最後經過provider的store屬性（provider組件從React-redux中獲取），把咱們建立的store傳遞進去便可。被provider包着的容器組件內部就可獲取到這個store了。回顧context的用法就知道provider內部作了什麼（定義getChildContext）以及容器組件是如何獲取到store了（經過this.context獲取）。

　　對於樹形的組件結構如何用react-redux來實現？展現型組件中有多個子組件，這些子組件能夠擁有本身的狀態，也能夠經過獲取上級展現型組件中的props來展現數據。

 dispatch除了能夠在中mapDispatchProps(dispatch)使用，還能夠在被鏈接的展現型組件中使用：

import React from 'react'; import ReactDOM from 'react-dom'; import {createStore} from 'redux' import { Provider,connect } from 'react-redux' let Btn = ({dispatch})=>{ return ( <button onClick={()=>{dispatch({type:"click"})}}>click</button>
 ) } const reducer = (state,action)=>{ console.log(action) return state; } const store = createStore(reducer); Btn = connect()(Btn); ReactDOM.render( <Provider store={store}>
        <Btn />
    </Provider>,
    document.getElementById('root') );

 

這裏補充一個react-redux的異步狀態初始化的例子：

import React from 'react'; import ReactDOM from 'react-dom'; import {createStore} from 'redux' import { Provider,connect } from 'react-redux' class Show extends React.Component{ componentDidMount(){ this.props.loadData(); } render(){ return <div>{this.props.msg}</div>
 } } const mapStateToProps = (state)=>{ return { msg:state.msg } }; const mapDispatchProps = (dispatch)=>{ return { loadData:() => { setTimeout(()=>{ dispatch({type:"onLoaded",data:"async data"}) },2000); } } } const Container = connect(mapStateToProps,mapDispatchProps)(Show); const reducer = (state, action) => { switch (action.type) { case "onLoaded": return { msg: action.data } } return state } const initState = {msg:""} const store = createStore(reducer,initState); ReactDOM.render( <Provider store={store}>
        <Container/>
    </Provider>,
    document.getElementById('root') );

 運行結果：2s 後界面上纔會顯示數據。