![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Redux基础
文章平均质量分 77
学习正当时丨人与青山两不负
即使自己过的不如意,也看不得世间疾苦!
知其黑、受其白
每个优秀的人,都有一段沉默的时光,那段时光,是付出了很多努力,却得不到结果的日子,我们把它叫做扎根。
你可以从别人那里汲取某些思想,但必须用你自己的方式加以思考!
展开
-
P22:优化-React-redux程序优化
React-redux阐述用结构复制精简代码把TodoList改为UI组件-提高性能阐述本文主要内容把现在写的代码优化一下,写程序的都应该有一些代码洁癖,就像我们人穿衣服一样,一定要干净得体才能提升气质,同样我们写代码也一样,干净有条理才能写出让人称赞的程序。写完业务逻辑后作代码优化,也是程序员的本质工作之一。用结构复制精简代码现在代码中有好几处 this.props 都是重复的,这时候就可以用javascript的解构赋值方法,来精简代码。修改TodoList.js中的Render函数,把原来带原创 2021-12-15 19:21:32 · 163 阅读 · 0 评论 -
P21:Redux进阶-React-redux增加List数据
Redux 进阶阐述给 button 按钮增加点击事件编写Reducer的业务逻辑页面UI部分的制作编写Reducer的业务逻辑阐述本文主要学习一下如何用React-Redux增加列表数据,如果你上一篇文章的流程练习熟练了,那本文就不是很难了。我们接下来要实现的效果,就是点击提交按钮时,可以在列表中进行增加。给 button 按钮增加点击事件直接在 /src/TodoList.js 里的 Button 增加一个 onClick 事件,代码如下:<button onClick={this.p原创 2021-12-15 19:10:22 · 580 阅读 · 0 评论 -
P20:Redux进阶-React-redux中的Provider和connect
Redux 进阶阐述Provider 提供器讲解connect 连接器的使用映射关系的制作React-redux 的数据修改编写onChange响应事件编写DispatchToProps派发action到store中阐述上篇文章我们已经完成了 React-redux 开发 TodoList 组件的基本环境。现在就可以开始学习React-redux了,本文主要学习一下 Provider 和 connect 这两个知识点。Provider 提供器讲解Provider 是一个提供器,只要使用了这个组件,原创 2021-12-15 17:59:57 · 808 阅读 · 0 评论 -
P19:Redux进阶-React-Redux介绍和安装
Redux 进阶阐述React项目初始化安装 react-redux修改代码,让它跑起来Redux的安装和使用(复习)阐述React-Redux是一个React生态中常用组件,它可以简化Redux流程,本文我们就重新建立一个项目Demo2,然后我们会用React-redux把之前的TodoList案例重新实现一遍。当然,如果你公司不用这个插件,其实没必要耗费时间学。但是作为一篇文章,必须保证知识尽可能完整。(需要注意的是概念:React、Redux、React-redux是三个不同的东西)React原创 2021-12-15 16:14:48 · 689 阅读 · 0 评论 -
P18:Redux-saga获取TodoList列表
Redux 进阶阐述编写 `TodoList.js` 文件编写 `sagas.js` 文件(也是业务逻辑)阐述上节内容已经完成了redux-saga的安装和基本配置,这篇文章就用Redux-saga来完成TodoList的列表获取。其实redxu-saga是比redux-thunk要复杂的,它多出了很多API需要学习,至少是学习成本增加了。但是有的人说saga更适合于大型项目,本人不予表态,也不想引战,如果你的公司用了saga,这两篇文章足可以让你入门了。编写 TodoList.js 文件我们先原创 2021-12-15 15:12:46 · 326 阅读 · 0 评论 -
P17:Redux-saga 的安装和配置
Redux 进阶阐述redux-saga 的安装引入并创建 Redux-saga创建 `sagas.js` 文件并引入Upfiledemo01\src\store\index.jsdemo01\src\store\sagas.jsdemo01\src\TodoList.js阐述首先声明一下,文中讲的中间件不是React的中间件,而是Redux的中间件,这一点你要明白,否则工作中会出大问题的,你的React知识架构也会出现偏差。其实Redux的中间件不仅仅只有Redux-thunk,还有一个比较出名的是原创 2021-12-15 14:49:17 · 595 阅读 · 0 评论 -
P16:Redux-thunk中间件的使用方法
Redux 进阶阐述在 `actionCreators.js` 里编写业务逻辑涉及到的文件demo01\src\store\actionCreators.jsdemo01\src\TodoList.js阐述本文我们把向后台请求数据的程序放到中间件中,这样就形成了一套完整的Redux流程,所有逻辑都是在Redux的内部完成的,这样看起来更完美,而且这样作自动化测试也会变动简单很多,所以工作中你还是要尽量按照这种写法来写。在 actionCreators.js 里编写业务逻辑以前 actionCreat原创 2021-12-15 11:20:52 · 263 阅读 · 0 评论 -
P15:Redux-thunk中间件的安装和配置
Redux 进阶阐述安装 Redux-thunk 组件配置 Redux-thunk 组件阐述接下来我们讲解一下 Redux-thunk 这个Redux最常用的插件。什么情况下会用到这个插件呢?比如在 Dispatch 一个 Action 之后,到达 reducer之前,进行一些额外的操作,就需要用到 middleware(中间件)。在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告,调用异步接口或者路由。 这个中间件可以使用的是Redux-thunk来进行增强(当然你也可以使用其它的),它就原创 2021-12-15 10:49:22 · 503 阅读 · 0 评论 -
P14:Redux进阶-Axios异步获取数据并和Redux结合
Redux 进阶阐述利用php创建模拟数据安装并使用Axios获取数据后跟Redux相结合(重点)demodemo01\src\index.jsdemo01\src\TodoList.jsdemo01\src\TodoListUI.jsdemo01\src\store\index.jsdemo01\src\store\reducer.jsdemo01\src\store\actionTypes.jsdemo01\src\store\actionCreators.js阐述接下来我们学习一下如何从后台取得数原创 2021-12-15 10:18:02 · 438 阅读 · 0 评论 -
P13:Redux进阶-Redux中的无状态组件的改写
Redux 进阶阐述无状态组件的改写总结阐述无状态组件其实就是一个函数,它不用再继承任何的类(class),当然如名字所一样,也不存在state(状态)。因为无状态组件其实就是一个函数(方法),所以它的性能也比普通的React组件要好。无状态组件的改写把UI组件改成无状态组件可以提高程序性能,具体来看一下如何编写。1、首先我们不在需要引入React中的{ Component },删除就好。2、然后写一个TodoListUI函数,里边只返回JSX的部分就好,这步可以复制。3、函数传递一个prop原创 2021-12-14 18:45:54 · 121 阅读 · 0 评论 -
P12:Redux进阶-将组件UI和业务逻辑进行拆分
Redux 进阶阐述拆分UI组件TodoList.js 文件的修改UI组件和业务逻辑组件的整合demo项目目录demo01\src\index.jsdemo01\src\TodoList.jsdemo01\src\TodoListUI.jsdemo01\src\store\index.jsdemo01\src\store\reducer.jsdemo01\src\store\actionTypes.jsdemo01\src\store\actionCreators.jsAssign arrow functi原创 2021-12-14 18:27:29 · 547 阅读 · 0 评论 -
P11:Redux总结三个最容易犯的错误
Redux 基础阐述Store必须是唯一的只有store能改变自己的内容,Reducer不能改变Reducer 必须是纯函数阐述看到这里Redux基础部分也就快结束了,但是我有必要单独拿出一篇文章,把平时你容易犯的错误总结一下。本文的知识点你可能都已经知道,也可以省略不看。我总结了三个React新手最容易犯的错误。1、store必须是唯一的,多个store是坚决不允许,只能有一个store空间2、只有store能改变自己的内容,Reducer不能改变3、Reducer必须是纯函数Store必须原创 2021-12-14 16:53:43 · 453 阅读 · 0 评论 -
P10:Redux的编程小技巧总结
Redux 基础阐述把Action Types 单独写入一个文件引入Action中并使用引入Reducer并进行更改编写 actionCreators.js文件修改 todoList 中的代码修改另两个Action方法阐述通过前几篇文章做的 ToDoList Demo,如果你已经能熟练掌握了,说明你Redux已经入门了,可以先看个小姐姐跳舞来奖励自己一下了。但是呢你可能是一个已经走上工作岗位的老手,那你这样写Redux就稍微有点low了,你需要作合理的分离让层次更清晰。本文我们来讲两个Redux实际原创 2021-12-14 16:34:05 · 227 阅读 · 0 评论 -
P09:用Redux实现ToDoList的删除功能
Redux 基础阐述绑定子项响应事件在方法里编写Redux的Actionreducer业务逻辑的实现demodemo01\src\TodoList.jsdemo01\src\store\reducer.js阐述本文我们用Redux来制作一下删除功能,即在点击 ToDoList中 的列表子项时,删除对应的子项。当然如果你觉的对Redux的流程已经掌握,可以自己先尝试着作一遍,然后再来进行对比。绑定子项响应事件打开 src 目录下的 TodoList.js 文件,然后找到 List 组件的 render原创 2021-12-14 15:55:20 · 354 阅读 · 0 评论 -
P08:Redux制作ToDoList列表
Redux 基础阐述编写按钮添加响应事件和Action创建Action并用dispatch()传递给store编写Reducer的业务逻辑demodemo01\src\store\index.jsdemo01\src\TodoList.js知识点:让组件发生更新demo01\src\index.jsdemo01\src\store\reducer.js阐述通过上章节的知识,我们用同样的方法和流程,再开发一遍 toDoList 里边的列表功能,具体来说就是当点击添加按钮时,ToDoList 组件的列表会增原创 2021-12-14 15:38:25 · 301 阅读 · 0 评论 -
P07:通过Input体验Redux的流程
Redux基础阐述增加 Input 响应事件源码创建 Actionstore 的自动推送策略让组件发生更新总结demo初始化项目安装 Ant Design UI组件Chrome 安装插件 Redux-DevTools安装 Redux 是JavaScript应用工具创建 Redux项目目录结构demo01\src\index.jsdemo01\src\TodoList.jsdemo01\src\store\index.jsdemo01\src\store\reducer.js阐述本文将要带大家作的就是通过原创 2021-12-14 12:23:26 · 422 阅读 · 0 评论 -
P06:Chrome插件 Redux-DevTools 用来调试Redux数据
Redux基础阐述如何配置Redux Dev ToolsChrome插件 Redux-DevTools – Redux调试工具阐述在前面的文章中已经制作了Redux中state仓库,也可以从仓库中取出数据了。接下来我们需要在控制台调试这些仓库里的数据,需要使用 Redux DevTools。这是一个Chrome插件,专门用来调试Redux数据的,安装这个需要你科学的上网,才可以安装下来。Chrome插件 Redux-DevTools – Redux调试工具安装完成后,你在控制台中就可以看到Red原创 2021-12-14 10:10:01 · 1171 阅读 · 0 评论 -
P05: * 创建Redux中的仓库 - store 和 reducer
阅读目录阐述编写创建 store 仓库在 store 中为 todoList 初始化数据组件获得 store 中的数据Module not found: Can't resolve 'redux' indemo`demo01\src\store\index.js`TodoList.jsreducer.js`demo01\src\index.js`阐述本节开始,算是正式进入了Redux的编码阶段,你也要集中注意力进行学习了。开始编码前,你应该再熟悉一下以前讲的redux的工作流程。所以我也把图片放到了原创 2021-12-14 10:09:41 · 520 阅读 · 0 评论 -
P04:用Ant Design制作UI界面
阅读目录阐述引入CSS样式编写Input框编写Button按钮List组件制作列表总结demoTodoList.jsindex.js阐述已经完成了基本开发环境和AntDesign的安装。这节课用Ant Design制作一下TodoList的界面。本文不会对Ant Design深入讲解,只是为了让课程的界面好看一点,如果你对它有强烈的学习需要或愿望,可以看一下Ant Design官方文档,文档都是中文,没有什么难度。先看一下实现的效果图。引入CSS样式在使用Ant Design时,第一件事就是先原创 2021-12-14 10:09:08 · 1522 阅读 · 1 评论 -
P03: Ant Design 企业级开发UI框架 - 介绍和环境初始化
阅读目录阐述初始化项目快速生成基本代码结构安装 `AntDesign`阐述Ant Design 是一套面向企业级开发的UI框架,视觉和动效作的很好。阿里开源的一套UI框架,它不只支持React,还有 ng 和Vue的版本,我认为不论你的前端框架用什么,Ant Design 都是一个不错的选择。习惯性把 AntDesign 简称为 antd。 目前有将近5万Star,算是React UI框架中的老大了。官网为:https://ant.design/index-cn初始化项目这里我默认你已经看过我的原创 2021-12-13 17:42:19 · 1203 阅读 · 0 评论 -
P02:Redux工作流程
阅读目录阐述redux 官方图片我画的理解图总结阐述本文要学习的知识非常重要,你只有学会了Redux工作流程,你才能对Redux有个通透的了解。如果你只看官方的图或者自己看文档,还是有一点难度的。redux 官方图片先来看一下官方给的图片,我也试着解说一下,不好勿怪。因为这东西本来就不太好了解,官方又很抽象。其实我觉的这个图完全是个已经会Redux的人看的,至少是一个入门Redux的人看的,完全不符合一个初学者的视角。我画的理解图我就以多年老司机的身份给你们讲解一下这个图,这个图你完全可以理原创 2021-12-13 17:28:24 · 495 阅读 · 0 评论 -
P01:认识Redux
阅读目录阐述Redux 介绍Flux 和 Redux 的关系阐述通过React基础的学习,我相信你一定对React有了很好的了解,也可以制作出一些简单的React项目(注意我这里说的是简单的项目)。为什么你只能做出一些简单的项目那?因为React就是一个简单的轻量级的视图层框架。React当中的组件通信和状态管理是特别繁琐的,比如子组件和父组件通信改变值,要通过父组件的方法。在开发中,公司最讲的就是效率,效率就需要把事情变简单,那只有React肯定不符合大型项目和快速开发。需要 视图层框架+数据原创 2021-12-13 17:18:09 · 206 阅读 · 0 评论