為何運用redux

跟着前端單頁面開闢愈來愈龐雜，javascript須要治理愈來愈多的狀況state。假如一個model的變化引發另一個model的變化，view的變化，那末當 view 變化時，就可以引發對應 model 以及另一個 model 的變化，順次地，可以會引發另一個 view 的變化。直至你搞不清楚究竟發生了什麼。state 在什麼時刻，因為什麼原因，怎樣變化已然不受掌握。 當體系變得撲朔迷離的時刻，想重現題目或許增加新功用就會變得寸步難行。Redux使得state在變化和異步中可展望。

在運用redux的運用中，一切的stae都以一個對象樹的情勢存儲在單一的store中，唯一轉變 state 的要領是觸發 action，action 怎樣轉變 state 樹，須要編寫 reducers。

Action 把數據從運用傳到 store 。它是 store 數據的唯一泉源。經由過程 store.dispatch() 將 action 傳到 store。
Reducers 指定了運用狀況的變化怎樣相應 actions 併發送到 store 的，actions 只是形貌了有事變發生了這一現實，並沒有形貌運用怎樣更新 state。更新state的函數稱為reducer，它是一個純函數，接收舊的state和action，返回新的state。reducer必需是一個純函數，不能舉行以下操縱：

• 修正傳入的參數
• 實行有副作用的操縱，如 API 請乞降路由跳轉
• 挪用非純函數，如 Date.now() 或 Math.random()

Redux供應了combineReducers函數，該函數接收一個對象，作用是天生一個函數，這個函數來挪用你的一系列 reducer，每一個 reducer 依據它們的 key 來篩選出 state 中的一部分數據並處置懲罰，然後這個天生的函數再將一切 reducer 的效果合併成一個大的對象。沒有任何魔法。正如其他 reducers，假如 combineReducers() 中包括的一切 reducers 都沒有變動 state，那末也就不會建立一個新的對象。

Store 是action和reader之間的橋樑，是把它們聯繫到一同的對象。Redux 運用只要一個單一的 store
Store有以下功用：

• 保持運用的state
• 供應 getState() 要領獵取 state
• 供應 dispatch(action) 要領更新 state
• 經由過程 subscribe(listener) 註冊監聽器
• 經由過程 subscribe(listener) 返回的函數註銷監聽器

運用createStore建立一個Store

const Store = createStore(reducers,other)

Redux的數據流

Redux是單向數據流。單向數據流的優點：意味着運用中一切的數據都遵照雷同的生命周期，如許可以讓運用變得越發可展望且輕易明白。同時也勉勵做數據範式化，如許可以防止運用多個且自力的沒法互相援用的反覆數據。

• 挪用 store.dispatch(action)，觸發action行動
• Redux store 挪用傳入的 reducer 函數，Store 會把兩個參數傳入 reducer： 當前的 state 樹和 action。
• 根 reducer 應當把多個子 reducer 輸出合併成一個單一的 state 樹。
• Redux store 保留了根 reducer 返回的完全 state 樹

Redux搭配react運用

運用react-redux。在react-redux的運用中，關注兩個要領：Provider和connect

• Provider把store放到context里，一切的子元素可以直接取到store，本質上 Provider 就是給 connect 供應 store 用的。
• connect 是一個高階組件，接收一個組件 WrappedComponent 作為參數，擔任鏈接組件，把給到redux里的數據放到組件的屬性里。主要有兩個作用：1. 擔任接收一個組件，把state里的一些數據放進去，返回一個組件；2. 數據變化的時刻，可以關照組件。