前言
最近在學 React-Native，卡在 React-Redux 上了，費了些時間和功夫，對其原理和資料流向瞭解了一點兒，畫了幅圖，解釋下。希望看這篇文章的人最好對 Redux 有些瞭解，假如不瞭解，可以去看下阮一峰的文章。有些解釋是個人理解，不是很嚴謹，假如有錯誤的地方，煩請指正。
資料流向圖
以下是來自阮一峰部落格上的程式碼，經過一些修改以適配 React-Native。
root.js
// 建立一個store全域性管理state和操作
const store = createStore(reducer);
// Provider在根元件<App>外面包了一層，App的所有子元件就預設都可以拿到state，通過元件的props傳遞
export default class Root extends Component {
render() {
return (
<Provider store={store}>
<App/>
</Provider>
)
}
}
複製程式碼app.js
// view提供UI元件
class Counter extends Component {
render() {
// View的狀態來自於props，props傳遞的是store中的state
const { value, onIncreaseClick } = this.props
return (
<div>
<span>{value}</span>
<button onClick={onIncreaseClick}>Increase</button>
</div>
)
}
}
// 將UI元件和容器元件連線起來
const App = connect(
state =>({
value: state.count //輸入，將store中的state通過props輸入
}),
dispatch =>({ // 輸出，將action作為props繫結到View上，使用者操作型別在此分發出去
onIncreaseClick: () => dispatch(increaseAction.increase())
})
)(Counter)
export default App
複製程式碼increaseAction.js
// 定義action的型別
export const INCREMENT = 'INCREMENT';
// 執行操作，返回包含action型別或data的新物件
export function increase(params) {
// 這兒可以執行網路請求，資料計算等操作，
return {
type: INCREMENT，
data:data
};
}
複製程式碼counterReducer.js
// 提供一個初始的狀態
initState={
count: 0
}
// 通過判斷Action的型別，返回新的資料改變後的state物件，即使沒有任何狀態的改變，也要返回一個物件
export default function counter(state = initState, action) {
const count = state.count
switch (action.type) {
case INCREMENT:
return { count: count + 1 }
default:
return state
}
}
複製程式碼資料的流向可以看下圖，先以一個View為例子，待會兒講多個，這幅圖看懂了，React-Redux也就明白的差不多了。
1、在這個例子中，View元件只提供UI，沒有自己的state和操作，那麼什麼導致了介面的變化？
是View本身的props，我們知道元件的初始狀態由props決定，雖然沒有了自己的state，假如他的props發生改變，介面也會發生變化。
2、View的props內容由什麼提供，多個View中的props如何區分？
由應用中全域性唯一store中的state提供，所有的狀態，儲存在一個物件裡面，通過key區分。<Provider store={store}> <App/> </Provider> 這行程式碼實現了為應用繫結唯一的store。
3、store是怎麼來的？
通過 store = createStore(reducer) 建立，reducer返回的正好是變化後的state物件。
前三個問題解釋了上圖左半部分的資料流向，reducer——(store/state)——provider——(state/props)——view
4、action是如何與reducer繫結的，或者說，reducer(state,action)這個函式中的action是怎麼來的？
是store.dispatch(action)內部處理的，先看下createStore(reducer)這個函式，簡略程式碼如下：
function createStore = ( reducer ) => {
let currentState; // 內部的狀態
let listeners = []; //所有的監聽者
const getState = () => currentState; // 獲取store中的state
// dispatch的操作就是內部執行reducer()函式，action和reducer在這兒產生交集，並且通知所有的監聽者
const dispatch = ( action ) => {
currentState = reducer(state, action); // 更新state
listeners.forEach(listener => listener());
}
// 訂閱事件
const subscribe = ( listener ) => {
listeners.push(listener);
return ()=>{
listeners = listeners.filter(l => l !== listener)
}
}
return {
getState,
dispatch,
subscribe
}
}
複製程式碼為什麼沒有顯示的寫出呼叫的是store中 的 dispatch，這個全都是React-Redux中 connect 和 Provider 的功勞了，假如不用他們，上面app.js 中的程式碼應該如下：
class Counter extends Component{
componentWillMount(){
// 訂閱狀態變化
store.subscribe((state)=>this.setState(state))
}
render() {
return (
<div>
<span>{value}</span>
// 點選後dispatch事件型別
<button onClick={()=>store.dispatch(increaseAction.increase())}>Increase</button>
</div>
)
}
}
複製程式碼5、reducer()函式執行之後，是如何更改state的？
見問題4中createStore的程式碼，簡化的可以寫成：
function createStore = ( reducer ) => {
let currentState; // 內部的狀態
const getState = () => currentState; // 獲取store中的state
// 更新state
const dispatch = ( action ) => {
currentState = reducer(state, action);
}
return {
getState,
dispatch,
}
}
複製程式碼以上兩個問題解決了解釋了上圖右半部分的資料流向，view——(action)——dispatch——(action)——reducer，兩個資料迴圈合在一起，就是一個圓，完成了生命的大和諧。如下圖：
多個Reducer
看完上面的分析，我們再擴充下，上圖中只有一個reducer，正常的app中有很多View，自然有很多相對應的reducer，那麼一個介面的action是如何與其對應的reducer繫結的呢？
假如上面的專案中新增了一個loginReducer.js檔案，程式碼如下：
loginReducer.js
// 提供一個初始的狀態
initState={
login: false
}
// 通過判斷Action的型別，返回新的資料改變後的state物件，即使沒有任何狀態的改變，也要返回一個物件
export default function login(state = initState, action) {
const login = state.login
switch (action.type) {
case INCREMENT:
return { login: !login }
default:
return state
}
}
複製程式碼這個reducer就執行一個操作，收到 INCREMENT 這個操作型別，登入狀態反轉一次。假如我再點選那個按鈕，count這個數字增加的同時，登入狀態會不會發生變化呢？答案是會！那為什麼呢？
會的前提是：你用到了下面的程式碼：
const rootReducer = combineReducers({
counter: counter,
login:login
});
store=createStore(rootReducer);
複製程式碼combineReducers 顧名思義就是合併reducer，所謂的合併，就是把reducer函式物件整合為單一reducer函式，它會遍歷所有的子reducer成員，並把結果整合進單一狀態樹，所以最後只有一個reducer，重複一遍，最後只有一個reducer函式！combineReducers粗略的程式碼如下：
export default function combineReducers(reducers) {
var reducerKeys = Object.keys(reducers)
var finalReducers = {}
//提取reducers中value值為function的部分
for (var i = 0; i < reducerKeys.length; i++) {
var key = reducerKeys[i]
if (typeof reducers[key] === 'function') {
finalReducers[key] = reducers[key]
}
}
var finalReducerKeys = Object.keys(finalReducers)
return function combination(state = {}, action={}) {
var hasChanged = false
var nextState = {}
/**
* 遍歷訪問finalReducers
*/
for (var i = 0; i < finalReducerKeys.length; i++) {
var key = finalReducerKeys[i]
var reducer = finalReducers[key]
/**
*將state按照reducer的名字分離
* 每個key都對應著state
*/
var previousStateForKey = state[key];
var nextStateForKey = reducer(previousStateForKey, action)
nextState[key] = nextStateForKey
hasChanged = hasChanged || nextStateForKey !== previousStateForKey
}
return hasChanged ? nextState : state
}
}
複製程式碼上面的程式碼可以看出，當dispatch一個action，所有的reducer函式都會執行一遍，通過action.type修改對應的state，從而所有訂閱相應state的View都會發生變化。所以上面問題的答案就是：會。
最後再放一個圖，也就是多個reducer和action時的資料流向圖。
store，state，reducer，action其實最後都只有一個，我們只是為了程式碼邏輯將其分為多個，層次分明，便於開發和閱讀。
總結
一句話總結，View負責UI介面，redux將View中的state和操作集中起來在store中管理，然後通過props將修改後的state內容傳遞給View，介面發生變化。使用者操作介面，View通過dispatch執行相關操作，然後將ActionType和Data交由reducer函式，根據ActionType和Data修改state。
致謝
最後
喜歡的請點贊和關注。
歡迎進入我的GitHub主頁，喜歡的可以follow我。