介绍刚开始看redux的时候还是一头雾水，感觉一头雾水，不过好像是一回事。当我接触到一个新概念时，可能会出现这种情况。接触多了就会熟悉了，今天就来分享为什么redux的三个核心可以如此神奇的施展魔法。整理完源码，真的有种隔着云雾看日出的感觉。我们稍微回顾一下redux的工作原理。放手吧，否则你会很容易头晕。Redux就是要实现数据共享，所以任何一个组件都会得到所有的状态，不可能一个组件只使用自己的状态。如果组件只使用自己的state，那么就不需要redux了，一切都是那么的简单明了。该商店用作管理状态的状态树。通过其getState可以读取状态，action下发命令写入状态（类似产品需求）。这是所有组件都必须遵守的契约，因为redux允许所有状态共享，所以读可以让你读，这不是严格要求的，但是写操作只能通过action修改状态（执行相应的reducer），从而确保数据安全。对于组件，你只需要发送一个动作。真是太方便了。好了，逻辑清楚了，接下来分析内部机制才有依据。探索商店以区分状态。一般我们的redux是和react结合使用的，但是react和redux只是合作关系，没有血缘关系。因此，react中的状态与redux中的状态是不一样的。react中的state是组件内部的状态信息，而redux中的state是redux本身的数据。当React与redux一起使用时，react将获取redux中的状态。在这种情况下，我们正在创建一个新的redux。redux下的目录结构如下：首先我们把要共享的数据放在state中exportconststate={head:{text:"我是头",color:'red'},body:{text:"Iambody",color:"green"}}这样，我们就设置好了要分享的数据。后面我们只需要导入这个文件暴露的接口就可以使用里面的数据了。构建createStoreAPI，为了把我们刚刚构建的state放到后面用createStoreAPI创建的对象中，我们需要这个函数接受两个参数，一个是我们创建的初始数据状态，另一个是modify函数。所以我们的createStorage.js代码如下：exportconstcreateStore=(state,storeChange)=>{conststore=state||{};constdispatch=(action)=>{storeChange(store,action);}return{store,dispatch}}这段代码的设计思路是，当我们创建一个store对象时，我们可以将后台提供的原始数据放入store对象中，然后暴露一个dispatch方法来修改state.根据规则，要修改共享状态，必须通过dispath方法，然后接收一个动作，该动作将调用reducer函数来实际执行更改。这相当于通过store连接action和reducer。创建了一个类似的createStoreAPI。在createStorage中构建storeChangeAPI。我们已经修改了组件的状态，交给了dispatch(action)。当我们的组件使用修改方法时，我们可以分派它。为什么是dispatch，因为dispatch是A名词写的，assignmentmanagementtooperation，就像我们要填写加薪申请一样。这样就更清楚了。毫无疑问我们的storeChange一定是reducer函数，所以storeChange.js代码如下：exportconststoreChange=(state,action)=>{switch(action.type){case'HEAD_COLOR':state.head.color=action.colorbreak;case'BODY_TEXT':state.body.text=action.textbreak;默认值：返回状态；}}工欲善其事，必先利其器。既然要用的武器都造好了，自然要用。index.js下的代码如下,dispatch}=createStore(state,storeChange)functionrenderHead(state){consthead=document.getElementById('head');}head.innerText=state.text;head.color=state.color;}functionrenderBody(state){consthead=document.getElementById('body');head.innerText=state.text;head.color=state.color;}functionrenderApp(state){renderHead(state.head)renderBody(state.body)}renderApp(store)dispatch({type:'BODY_TEXY',text:'我是一个被修改的身体dispath'})renderApp(store)创建rederAPP函数分别渲染head当我们需要改变body的状态时，我们dispatchaction。当我们修改完，想要重新渲染页面时，页面已经改变了。这是一个简单的redux最终效果是这样的：结语本来想在这篇文章继续请大佬context，但是感觉文章篇幅会很长，时间也太憋屈了，所以今天的分享先到这里，上下文下次再分享。本人不是很厉害，所以分享的可能比较基础，但个人觉得还是比较通俗易懂的。但在编程的路上，我能行且珍惜。我会逐步提高文章质量，分享更多经验。觉得好的朋友可以支持一波，谢谢大家。
