13. react 基础 redux 的基本介绍 及 用 antd 编写 TodoList 的样式
1. redux 简述
当 store 内的 数据进行变更的时候 多个组件感知到 store 内的数据变化 将会被自动更新
2. redux 工作流
Store 代表数据存储 (例如: 图书馆管理员)
React Components 代表 react 组件 (例如: 借阅的人)
Action Creators 代表 react 组件所触发的时间 ( 例如: 借阅的人像图书馆借的什么书 )
Reducers 代表 react 各个组件的状态 (例如:图书馆管理员记录借了什么书)
3. Redux 设计和使用的三项原则
1. store 是唯一的 整个项目中只有一个 store
2. 只有 store 能够改变自己的内容
store 拿到 reducer 的数据 自己对自己进行的更新 所以是 store 进行的自我更新
3. reducer 必须是纯函数 ( 给定固定的输入 一定有固定的输出 )
1. reducer 是一个函数
2. 返回的数据 包括Date , ajax , setTimeout 等这些函数的请求 他都不是一个纯函数
3.不能有副作用 ( 不能做其他参数的修改 )
4. Redux 核心 api
创建 store
createStore()
分发 action
store.dispatch()
获取 store内的 state
store.getState();
订阅每次 store 改变
store.subscribe();
4. 使用 antd 编写 TodoList 页面布局
1. 创建一个新的 react app
npx create-react-app my-app
cd my-app
npm start
2. 打开 antd 官网
安装 antd
yarn add antd
引入 antd 的样式
import 'antd/dist/antd.css';
3. 使用 antd 的 input , List, Button 框 参考官方文档 antd 官网
# eg : TodoList.js
效果图
13. react 基础 redux 的基本介绍 及 用 antd 编写 TodoList 的样式的更多相关文章
- React之 redux 的简单介绍及使用
1.为什么使用redux?在小型react项目的开发中 ,view(视图层)中的数据模型(即数据),可以存放在组件中的 state 对象,换句话说页面中的动态数据存放在 state 中. 但对于开发大 ...
- 14. react 基础 redux 的编写 TodoList 功能
1. 安装 redux 监听工具 ( 需要翻墙 ) 打开 谷歌商店 搜索 redux devtool 安装第一个即可 2. 安装 redux yarn add redux 3. 创建 一个 store ...
- react基础(1)
在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...
- 结合React使用Redux
前面的两篇文章我们认识了 Redux 的相关知识以及解决了如何使用异步的action,基础知识已经介绍完毕,接下来,我们就可以在React中使用Redux了. 由于Redux只是一个状态管理工具,不针 ...
- 《React 与 Redux 开发实例精解》出版了!
<React 与 Redux 开发实例精解>出版了! <React 与 Redux 开发实例精解>出版了! 关于 React 与 Redux React 与 Redux, 一个 ...
- AntDesign(React)学习-3 React基础
前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...
- 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)
一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...
- 基于react+react-router+redux+socket.io+koa开发一个聊天室
最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...
- 【前端】react and redux教程学习实践,浅显易懂的实践学习方法。
前言 前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目 中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...
随机推荐
- CRC校验算法详解
CRC(Cyclic Redundancy Check)循环冗余校验是常用的数据校验方法,讲CRC算法的文章很多,之所以还要写这篇,是想换一个方法介绍CRC算法,希望能让大家更容易理解CRC算法. 先 ...
- python 关于异常处理 try...except... 的两个案例
输入若干个成绩,求所有成绩的平均分.每输入一个成绩后询问是否继续输入下一个成绩,回答“yes”就继续输入下一个成绩,回答“no”就停止输入成绩. numbers = [] #使用列表存放临时数据 wh ...
- openCV 3.4 windows下的配置说明
链接: https://pan.baidu.com/s/1dkS_G8ZSBD8EnhYeEFZxhQ 密码: xu99 (从官网下的, 但360会提示有毒, 哈哈哈) 运行exe, 解压openCV ...
- python记事本实现查询替换
python 大作业 自己写了记事本 也参考网上的 查询会有点问题 替换没问题 # encoding=utf- from tkinter import * from tkinter.filedia ...
- STM32之GD25Q256应用笔记
前言 使用标准SPI指令格式: 3字节地址模式或4字节地址模式: 支持SPI 总线 模式0 和 模式3: 存储容量32MB: 时钟频率范围:80Mhz – 104Mhz: 主机:STM32F103ZE ...
- 在ubuntu中使用ipython
python自带的shell实在是不怎么好用 大家可以用一下ipython这个软件,它可以自动缩进,补齐,语法高亮等 安装办法: sudo apt install ipython #这个是安装2.7的 ...
- HDU - 3724 Encoded Barcodes (字典树)
题意:给定n个字符串和m个经过处理得到的字符串,问对于m个字符串中的每个字符串,n个字符串中以该字符串为前缀的个数.分析:1.误差在[0.95x, 1.05x],因此求8个数的平均数,大于平均数为1, ...
- maven手动安装ojdbc6.jar包到本地仓库
需要jar文件 ojdbc6.jar jar下载地址1 下载地址2 本地执行: mvn install:install-file -Dfile=D:/ojdbc6.jar -DgroupId=co ...
- Java扫雷游戏: JMine
JMine是用Java和Swing编写的扫雷程序.作者是Jerry Shen(火鸟),代码有一定年头了,最开始是作者的课程设计.阅读这种小程序对编程语言的学习挺有帮助.本文只简单介绍一些关键的地方,实 ...
- 087-把PHP数组中的元素按随机顺序重新排列shuffle
<?php $arr=array(3,23,'A','f','123','hello'); //定义一个数组 echo '排序之前的数组信息:<br>'; print_r($arr) ...