do一下来了一个redux

导语

一开看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下目录结构以下：

首先咱们把要共享的数据放在state里面

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下次分享了。本身并无很牛逼，因此分享的东西可能会比较基础一些，可是我我的感受挺通俗易懂的。可是编程路上，且行且珍惜，我会慢慢提升个人文章质量，分享更多心得。以为不错的朋友能够支持一波，谢谢你们。