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中用的最多 ...
随机推荐
- jsp中include的两种用法
JSP中的include的两种用法 1.两种用法 <%@ include file=” ”%> <jsp:include page=” ” flush=”true”/> 2.用 ...
- ThinkCMF框架上的任意内容包含漏洞
一.背景 ThinkCMF是一款基于PHP+MYSQL开发的中文内容管理框架,底层采用ThinkPHP3.2.3构建. ThinkCMF提出灵活的应用机制,框架自身提供基础的管理功能,而开发者可以根据 ...
- hook框架frida的安装以及简单实用案例
1.下载地址 https://github.co/frida/frida/releases 2.另外两种安装方法 1.Install from prebuilt binaries This is th ...
- 解决使用xampp无法通过ip访问的问题
本地能通过127.0.0.1或者localhost访问,无法通过外网地址访问: win解决防火墙问题: 1.进入控制面板 -> 系统和安全 -> 2.window防火墙 - 允许其他程序通 ...
- NO15 第一关课后考试
第一关课后考试: 1.创建目录/data/oldboy,并且在该目录下创建文件oldboy.txt,然后在文件oldboy.txt里写如内容:inet addr:10.0.0.8 Bcast:10.0 ...
- 浅析Java NIO
浅析Java NIO 前言 在说NIO之前,先来说说IO的读写原理.我们都知道Java中的IO流可以分为网络IO流和文件IO流,前者在网络中使用,后者在操作文件时使用.但实际上两种流区别并不是太大 ...
- C++输入问题探究
突发奇想对C++输入输出做一点研究,主要是做笔试题自己写输入老是花很多时间,所以做一个总结. 对于输入多行字符串,代码如下: #include<iostream> #include< ...
- Golang的运算符-算数运算符
Golang的运算符-算数运算符 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.算术运算符概述 常见的算术运算符: +: 可表示正号,如",结果为"Jaso ...
- 2的n次幂
位运算判断2的n次幂: 举个栗子,n = 8:则二进制表示就为1000,n-1则为 0111 取&刚好等于0 嘿嘿,巧妙吧. 再举个栗子,n = 7: 则二进制为 0111,n-1则为0110 ...
- Linux应用可通过USB访问Android设备-Chrome OS 75版发布
导读 谷歌已经为支持的Chromebook设备发布了Chrome OS 75操作系统,这是一个主要版本,增加了各种新功能,最新安全补丁和其他改进. 对于大多数Chromebook设备,Chrome O ...