共计 2622 个字符，预计需要花费 7 分钟才能阅读完成。
导语
一开看 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 下次分享了。自己并没有很牛逼，所以分享的东西可能会比较基础一些，但是我个人感觉挺通俗易懂的。但是编程路上，且行且珍惜，我会慢慢提高我的文章质量，分享更多心得。觉得不错的朋友可以支持一波，谢谢大家。
