Redux解決了什麼問題

忽略此文，不敢浪費你的時間

Redux是什麼？

Redux是Facebook提出一個數據狀態管理的庫，也能夠說框架。它搭配React解決了組件之間通訊問題，這個通訊問題，是組件和其它組件之間也能夠跨層通訊，不須要一層一層的把，父組件的數據往下傳遞。這會增長代碼複雜度和維護的複雜度。

若是使用React.createContext的API也能夠實現跨層通訊，你能夠單獨寫一個模塊去封裝Context.Provider和Context.Consumer，只有在根組件使用Context.Provider後，須要共享Context上的數據的組件，均可以經過引入Context.Consumer組件去獲取公共的數據。哪一個組件須要頂層組件的數據，就必須引入Context.Consumer。

//context.js
  export default Context  = createContext('')

//app.js
 let store = createStore(reducer)
 <Context.Provier value={store}>
    <App />
 </Context.Provider>

import Context from './context.js'
 <Context.Consumer>
    {(data) => (<div>{data.time}</div>)}
</Context.Consumer>

store

整個Application的數據保存地。這裏有一切應用所共享的數據，後臺交互和用戶輸入的數據都在這裏管理。Redux提供了一個方法，創造整個應用數據的store,只須要使用es6模塊機制，import命名能夠輸出咱們須要的接口。

import { createStore } from 'redux'
//建立store必須，外部注入數據和改變整個state的邏輯
let store = createStore(reducer,initalPreLoadState)

action

描述界面的交互和行爲的對象，用戶要作什麼事，必須發送一個action對象到store的dispatch函數裏面，根據提供reducer去匹配action.type，若是沒有type匹配對了，會執行接下里的邏輯，更新整個store裏面該改變的數據。

store.dispatch的源代碼裏，對傳入的action是否爲對象作了判斷，是否有type屬性也作了判斷。若是action沒有問題，那麼執行定義傳入的reducer(state,action)函數，

reducer

reducer是一個純函數，什麼樣的輸入就得出什麼樣的輸出，怎麼理解呢? store.dispatch發送了action，固然，這個store.dispatch早就放在了標籤的事件裏，等着用戶去觸發。action對象來到store.dispatch函數內存，有了action的數據，執行reducer函數，去匹配類型，執行對應的代碼。

function add(state=0,action) {
        switch(action.type){
            case 'add':
                return state + 1
            case 'decre':
                return state - 1
            default:
                return state
        }
    }

改變state的惟一方式

state和view一一對應，state改變了，view也就改變了。state如何改變，界面的標籤上，給定的事件，store.dispatch函數，該函數的參數是action對象，描述要作什麼事，觸發此函數，傳遞給整個應用的store，會執行store.dispatch函數裏的reducer函數，去更新state，store.subscribe函數監聽store的數據發生變化，便會觸發此函數去更新React的根組件。

Redux沒有解決什麼？

redux庫提供了核心一個API,createStore函數，能夠把整個應用的數據也就是存放在store裏面，可是它真的只提供了數據，對於組件之間的通訊，redux庫是沒有解決的。store裏面的數據仍是得從頂層組件往下傳，一層一層傳。

若是要跨組件通訊，頂層組件與任意組件通訊，redux必須藉助react的Context的API，結合Redux和React結合成一個庫，這樣提供的兩個API，就能夠跨層通訊。

React-Redux庫解決了什麼問題

解決了跨層組件通訊問題。