redux 實現原理

一、爲何要使用redux?

咱們都知道在React中，數據在組件中是單項綁定的。父組件向子組件傳遞數據能夠經過props，可是兄弟組件之間傳遞數據就比較麻煩。redux 就能夠解決這一問題。

二、redux 的設計理念

redux 是將整個應用的state存儲在一個公共的store文件當中，組件能夠經過分發（dispatch）一個動做或者是行爲（action）給這個公用的store，而不是直接去通知其餘組件，組件內部經過訂閱store中的狀態state來刷新本身的視圖。這裏我我的對的理解是，在咱們的組件內部有個相似於監聽器的東西，一旦監聽到store中的值發生了改變就會刷新咱們的頁面。

三、redux 三大原則

• 惟一數據源

整個應用的數據存儲在一個統一的狀態樹中，也就是咱們前面所說的公共的store 文件。在組件都會從這個store中獲取數據。

• 保持只讀狀態

state是隻讀的，惟一改變state的方法就是觸發action，action是一個用於描述以發生時間的普通對象。

• 數據改變只能經過純函數來執行

使用純函數來執行修改，爲了描述action如何改變state的，你須要編寫reducers。

四、redux原理詳細解析

下面詳細介紹一下redux的工做原理

4.1 Store

經過上面的內容，我想你們應該對redux的用途或者說它是用來幹什麼的，能幫助開發者解決什麼問題大概了有了一些瞭解，咱們說了redux是爲了解決react中數據單向流動的問題，說到數據咱們上面頁提到了，redux中的數據是存儲在一個狀態樹store中，因此說：

• store就是保存數據的地方，你能夠把它當作一個數據，並且整個應用能有一個store。
• redux提供了createStore這個函數，用來生成store。

import {createStore} from 'redux'
    const store=createStore(fn);
複製代碼

4.2 State

state就是store中存儲的數據，store裏面能夠擁有多個state，Redux規定一個state對應一個View,只要state相同，view就是同樣的，反過來也是同樣的，能夠經過store.getState( )獲取。

import {createStore} from 'redux'
    const store=createStore(fn);
    const state=store.getState()
複製代碼

4.3 Action

state的改變會致使View的變化，上面咱們說過redux中不能直接經過this.setState()修改state，爲了使state發生改變，在redux中提供了一個對象Action,咱們能夠理解爲一個行爲或者是動做，也就是說這個action能夠改變state，並且也是改變state的惟一方法。

const action={
      type:'ADD_TODO', //action名稱，必須存在
      payload:'redux'
    }
複製代碼

4.4 store.dispatch( )

store.dispatch( )是view發出Action的惟一辦法，這裏解釋一下，在view中，用戶觸發一個行爲或者簡單理解點擊某一個按鈕，這時候若是須要修改state值，就須要觸發action，而store.dispatch接收一個Action做爲參數，將它發送給store通知store來改變state。

const action = {
        type:'ADD_TODO',
        payload:'redux'
    };
    store.dispatch(action);
複製代碼

4.5 Reducer

Store收到Action之後，必須給出一個新的state，這樣view纔會發生變化。這種state的計算過程就叫作Reducer。 Reducer是一個純函數，他接收Action和當前state做爲參數，返回一個新的state。

const reducer =(state,action)=>{
      switch(action.type){
        case ADD_TODO:
            return newstate;
        default return state
      }
    }
複製代碼

至此redux的原理就介紹完了，若是還有不一樣理解的小夥伴們還請下發留言。若是有寫的很差的地方還請多多指教。我會繼續更新有關前端的技術文章的。