導語

一開看redux的時候還是比較蒙的，感覺比較繞，但是又好像是那麼回事，接觸一個新概念的時候可能都是如此，多去接觸就熟悉了，今天就來分享下redux的三大核心為什麼就能如此神奇的施展魔法，幹擼完原始碼，真的就有種撥開雲霧見日出的感覺

開整

我們再來稍微溫習下redux的工作原理。墊吧墊吧，要不然容易暈。redux是為了實現資料共享，那麼任何一個元件都會得到所有的狀態，而且元件也不可能只用自己的狀態，如果元件只用自己自己的狀態，那麼就不需要redux了，一切就如此簡單明瞭。store作為一個狀態樹，來對狀態進行管理。通過它的getState可以對state進行讀操作，action釋出命令對狀態進行寫（類似於產品提需求）。這是所有元件都要遵守的約定，因為redux讓所有狀態都共享，所以說，讀可以讓你讀，不嚴格要求，但是寫操作，只能通過action修改state(執行相應的reducer)，這樣才能保證資料的安全性。而對於元件來說，你只要dispatch一個action就好了。就是如此方便。好了，邏輯都明白了，接下來分析下內部機制就有基礎了。

一探store

分清state

一般我們的redux都是配合react使用，但是react和redux只是合作關係，並沒有血緣關係。因此，自然react中的state也和redux中的state不是一回事了，react中的state是元件內部自己的狀態資訊，而redux中的state是redux自己的資料。React配合redux使用的時候，react就會拿redux裡面的state。既然如此我們在新建一個redux，在redux下目錄結構如下：

 export const state = {
    head: {
        text: "我是頭部"
 
,
        color: 'red'
    },
    body: {
        text: "我是body",
        color: "green"
    }
}
複製程式碼

這樣我們就把要共享的資料設定好了，待會我們只要把這個檔案暴露的介面引入就能使用這裡面的資料了。

構建createStoreAPI

我們為了把我們剛才構建的state也放到待會我們要用構建的這個createStoreAPI建立的的物件裡面去，我們需要這個函式接受兩個引數，一個就是我們建立的最初資料狀態，另一個是修改函式。於是我們的createStorage.js程式碼如下：

export
 
 const createStore = (state,storeChange) => {
    const store = state || {};
    const dispatch = (action) => {
        storeChange(store,action);
    }
    return { store,dispatch }
}
複製程式碼

這段程式碼的設計思想是，當我們在建立一個store物件時，我們可以把後臺提供的原始資料放入到store這個物件中，然後再暴露一個dispatch方法來修改state。按照規則，要修改共享的狀態，必須通過dispath方法，然後接收一個action，他會呼叫reducer函式來真正執行改變。這樣的就相當於通過store把action和reducer連線起來了。一個差不多的createStoreAPI就建立完了

構建storeChangeAPI

在createStorage裡面，我們已經把元件修改state，交給了dispatch(action) ,當我們元件使用修改方法的的時候，就可以dispatch了，為何要dispatch，因為dispatch是寫的一個名詞，分配管理改操作，就像我們要加工資要填申請一樣。那這樣就更加明朗了。毫無疑問，我們的storeChange肯定就是一個reducer函數了，於是storeChange.js程式碼如下：

export const storeChange = (state,action) => {
    switch(action.type) {
        case 'HEAD_COLOR':
             state.head.color = action.color
        break;
        case 'BODY_TEXT':
            state.body.text = action.text
        break;
        default: 
            return state;
    }
}
複製程式碼

工欲善其事，必先利其器。現在要用的武器都打造好了，自然就喲使用起來了，在index.js下程式碼如下

import { state } from './redux/state.js'
import { storeChange } from './redux/storeChange'
import { createStore } from './redux/createStorage'

const { store ,dispatch } =createStore(state, storeChange)

function renderHead (state) {
    const head = document.getElementById('head');
    head.innerText = state.text;
    head.color = state.color;

}
function renderBody(state) {
    const head = document.getElementById('body');
    head.innerText = state.text;
    head.color = state.color;

}
function renderApp(state) {
    renderHead(state.head)
    renderBody(state.body)
}
renderApp(store)
dispatch({type: 'BODY_TEXY',text: '我是經過dispath修改的body'})
renderApp(store)
複製程式碼

建立rederAPP函式分別渲染head和body 當我們需要改變state的時候就dispatch一下action，當我們修改完了，要頁面重新渲染下，頁面就發生了改變了。這就是一個簡易的redux了 這就是最終的效果：

結束語

本來想在本文繼續把context這個大佬請出來的，但是感覺篇幅會很長，而且剛好時間也比較尷尬，所以今天的分享就先到這，context下次分享了。自己並沒有很牛逼，所以分享的東西可能會比較基礎一些，但是我個人感覺挺通俗易懂的。但是程式設計路上，且行且珍惜，我會慢慢提高我的文章質量，分享更多心得。覺得不錯的朋友可以支援一波，謝謝大家。