ReduxTrilogy1《还阔以》

背景我：你好！我对这个职位感兴趣，我们可以聊天吗？招聘人员：您好！感谢关注。发简历方便吗？几分钟后。..招聘人员：你用过react吗？我：只看过一些项目，没有真正开发过。recruiter至今没有收到recruiter的消息，后面跟recruiter聊天的时候基本都是问有没有用过react。不过好在两个框架的思路差别不大，看起来也没有那么难。我花了一些时间学习了react的语法和一些简单的用法。想学习react全家桶里的redux，刚刚看了阮一峰老师的redux入门文章，受益匪浅。所以我想和大家分享一下我的学习心得。本文为阮一峰先生原创。Redux老大的文章解释了什么时候需要使用Rudex，什么时候不需要。但是，因为在学习，即使知道现在不能用，但还是要做，要不就用到时候用。方恨少[哈哈哈]。所以这里就不告诉大家reudx这个大佬什么时候用了。有兴趣的可以移步大佬文章。Redux是一种设计模式（经过验证的解决方案，解决问题的模板）。它是用来管理状态的，就像数据库一样，是用来管理数据的，数据可以进行一系列的操作。我们所有需要共享的状态都可以使用redux进行操作。官方的解释是：'它是一个提供可预测状态管理的javascript容器。它允许您构建一个一致的应用程序，该应用程序可以在不同的环境中使用并且易于测试。进入rudex先搭建一个react项目，直接上手，边做边学。这里有一个简单的counter应用，让大家感受一下Rudex在项目中如何应用create-react-appredux-counter，然后引入reduxyarnaddredux，准备工作做完之后，我们就要好好想想了。之前我们说过要把所有的状态都放在rudex里面，但是具体怎么做呢。Redux为我们提供了一个store来存储状态。整个应用商店是唯一的。Store有以下用途：提供应用程序所需的状态。它是一个容器，提供了getState()方法来获取状态。提供dispatch(action)方法获取state；提供了subscribe(listener)来注册listener现在我们不需要先对这些东西有一个清晰的认识，我们只需要知道有这些东西就可以了，因为‘贫穷会限制我们的想象力’。如果我们知道有，我们就会知道似乎有什么东西可以解决后面的困难。如果我们什么都不知道，那么代码就无从写起，连百度都不知道怎么表达我们想要的答案。所以听我说。修改我们刚刚构建的src目录下index.js文件下的代码ReactDOM.render((

),document.getElementById('root'));createStore是redux提供的生成store的函数，它接收store处理的reducer作为参数。先不说reducer，以后再说。现在让我们用计数器替换它。计数器现在是处理这个计数器的函数。后面我们会在src下建一个reducers文件夹，里面会暴露counter的功能。在render中，我们让view层显示，通过store.getState()获取state。然后我们在src下新建一个reducers文件夹，在里面新建一个index.js文件。代码如下：exportdefault(state=0,action)=>{console.log(action.type)switch(action.type){case'INCREMENT':returnstate+1;case'DECREMENT':返回状态-1;默认值：返回状态；动作计算的状态，视图与状态一一对应。第一次执行Redux时，状态是未定义的。这时候我们可以趁机设置并返回应用程序的初始状态，所以这里我们使用state=0来初始化状态，而这里我们直接通过函数参数(state=0)来初始化状态，这样是一种不好的做法。后面我们会将初始状态定义为常量，所以这里先这样写。然后通过动作改变状态。我们在判断动作的时候，经常使用开关来操作。但是当我们的用户想要操作数据时，动作就会被触发。到这里运行项目，我们可以看到界面上出现了一个'0'。接下来我们写一个用户操作的组件Counter，在components下新建一个Counter.jsimportReact,{Component}from'react';classCounterextendsComponent{render(){const{value,onIncrement,onDecrement}=this.props;return()}}导出默认计数器；我们要实现加减法。后面我们需要在父组件中传递这两个方法和状态。src下的index文件修改如下：importReactfrom'react';importReactDOMfrom'react-dom';import'./index.css';importAppfrom'./App';import*asserviceWorkerfrom'./serviceWorker';从'redux'导入{createStore};从'./components/Counter'导入计数器从'./reducers'导入计数器;conststore=createStore(counter);constrootEl=document.getElementById('root')constrender=()=>{ReactDOM.render(store.dispatch({type:"INCREMENT"})}onDecrement={()=>store.dispatch({type:'DECREMENT'})}/>,rootEl)}render();store.subscribe(render)serviceWorker.unregister();//单独构造状态树，状态与UI这里我们有两个不熟悉的API。发送和订阅。dispatch是派遣的意思。如果我们state中的state需要改变，就必须通过store.dispatch方法。这是View发出Action的唯一途径。没有规则就没有规则。这个状态是所有人共享的，所以这是任何组件改变它的唯一方法。它接收一个动作。如果需要详细解释dispatch是如何通过action触发reducer的，可以看源码。store.subscribe()，这里，store可以让我们设置一个监控功能，什么是监控，就是state改变了，我的view需要做改变，这就是MVVM。在React中，我们监听render方法。只要状态发生变化，render就会帮你重新渲染页面。另外，store.subscribe()方法会返回一个函数，如果我们想取消监听，可以调用这个函数。方法如下：letunsubscribe=store.subscribe(()=>{console.log(store.getState())})unsubscribe;到这里我们就完成了一个redux的小应用。Redux其实有3大概念。reducer,action,store先说action，action其实是最简单的，它是一个集中式的便利贴，用来管理actionsTypes，当store.dispath告诉action你要做什么。下一步是减速器。reducer会通过actio得到的operation进行相应的操作，然后将最终的数据发送给store。然后store，很明显，他连接了action和reducer，他还提供了我们操作数据的方法，为view提供数据。下面是这个实践的源代码。有需要的可以用，待续……*天赋和学问不大的小学生，三年级徒弟。文中肯定有很多不严谨或者理解不正确的地方，还望大佬们多多指教。同时也希望大佬能分享一些我觉得这块不错的干货链接。