redux简单使用
在前面的随便中有简单的使用过redux和react-redux,但是感觉写在一起,总是理不清楚,后面看了技术胖老师关于redux的视频后,感觉自己又有了新的理解,在这里简单记录一下。
项目准备
首先安装脚手架:npm install -g create-react-app
然后创建项目:create-react-app demo01
项目创建成功后,删除src下面除index.js以后所有的文件,然后新建一个TodoList.js,然后在index.js中引入:
接下来安装AntDesign和redux:
npm install antd --save
npm install --save redux
最后在TodoList.js中引入antd并使用,关于antd的使用和按需加载,在前面的随便有详细介绍。
import React, { Component } from 'react';
import {Input,Button,List} from 'antd' class TodoList extends Component {
constructor(props){
super(props)
this.state = {
inputValue:'something',
list:['web','php','node','java','IOS']
}
}
InputChange=(e)=>{
this.setState({
inputValue:e.target.value
})
}
addItem=()=>{
if(this.state.inputValue){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
}
delItem(index){
let arr=this.state.list;
arr.splice(index,1);
this.setState({
list:arr
})
}
render() {
return (
<div>
<div style={{margin:'10px'}}>
<Input value={this.state.inputValue} onChange={this.InputChange} style={{width:'240px',marginRight:'10px'}}/>
<Button type="primary" onClick={this.addItem}>增加</Button>
</div>
<div style={{width:'320px'}}>
<List bordered dataSource={this.state.list}
renderItem={(item,index)=>(<List.Item onClick={this.delItem.bind(this,index)}>{item}</List.Item>)}
/>
</div>
</div>
);
}
}
export default TodoList;
现在,基本实现了添加和删除操作,前期的准备工作完成。
创建store仓库
index.js
在上面的代码中,我们先是在reducer.js中,添加了一些默认的数据,然后暴露了一个用于修改数据的方法函数。
在index.js中,首先引入createStore方法,然后引入reducer后,创建了一个数据存储仓库,最后将这个仓库暴露出去。
组件获得store中的数据
数据改变
dispatch()
方法传递给store。
以input框的onChange事件为例:由于store只是一个仓库,所以在接收到action后,会自动转发给reducer,在reducer中有两个参数:state和action,其中state指的是原仓库的状态,二action指的是新传递的状态。在reducer中拿到新旧数据后,就可以根据action的type进行相应的改变了。但是,由于reducer只能接收state,不能改变state,所以需要声明一个新变量,然后用return返回回去。
现在,store里面的数据已经更新了,但是组件还没有更新,我们需要在组件的constructor里面订阅redux的状态,才能实时更新组件数据:
然后,继续按照这种方法修改添加和删除事件:
代码下载:点这里
redux简单使用的更多相关文章
- Flutter: redux简单使用
Pub redux flutter_redux import 'package:flutter/material.dart'; import 'package:redux/redux.dart'; i ...
- 使用redux简单的实现加法运算(简单的状态改变)
描述该做啥?(action)!具体怎么做(reducer)!统一规划(store:包含reducer+所有的state) 上代码:index.ios.js import React, { Compon ...
- React+Redux实现追书神器网页版
引言 由于现在做的react-native项目没有使用到redux等框架,写了一段时间想深入学习react,有个想法想做个demo练手下,那时候其实还没想好要做哪一个类型的,也看了些动漫的,小说阅读, ...
- Redux和React-Redux的实现(一):Redux的实现和context
react使用redux做状态管理,实现多个组件之间的信息共享,解决了父子组件.兄弟组件之间的复杂通信问题.vue有vuex,总之是一种flux的思想.react提供了react-redux这个库,一 ...
- 前端(十一):props、state及redux关系梳理
所谓状态机,是一种抽象的数据模型,是“事物发展的趋势”,其原理是事件驱动.广泛地讲,世界万物都是状态机. 一.状态机是一种抽象的数据模型 在react中,props和state都可以用来传递数据.这里 ...
- 看了就学会之React redux入门示例
环境准备 为了方便,这里使用create-react-app搭建react环境 create-react-app mydemo 弹出配置 如果需要自定义react的配置,需要运行下面的命令把配置文件弹 ...
- useReducer代替Redux小案例-1(七)
使用useContext和useReducer是可以实现类似Redux的效果,并且一些简单的个人项目,完全可以用下面的方案代替Redux,这种做法要比Redux简单一些.因为useContext和us ...
- redux和dva
实习的时候,公司使用的是react,react说实话生态学的还不是很完善,就暂时先不做跟react相关的博客,等以后学好了react全家桶之后,专门再总结一下react的内容 这两天看了公司的alit ...
- flutter Provide 状态管理篇
Provide是Google官方推出的状态管理模式.官方地址为: https://github.com/google/flutter-provide 现在Flutter的状态管理方案很多,redux. ...
随机推荐
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_04 数据结构_3_数据结构_数组
0x代表16进制的地址 arr通过首地址找到存储空间.
- python读写ini配置文件
像邮箱等信息是可以写在配置文件里面的,python有一个配置模块ConfigParser,可以处理配置文件信息 目录 1.配置模块ConfigParser 2.基本应用 1.配置模块ConfigPar ...
- [Python3 填坑] 005 如何“响铃”
目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 问题的由来 2.2 问题的解决 1. print( 坑的信息 ) 挖坑时间:2019/01/08 明细 坑的编码 内容 Py004-2 ...
- PHP中的异常和错误(转载)
博客好久没有更新了,实在惭愧,最近在忙人生大事,哈哈!这段时间没有看什么新的东西,结合项目中遇到的PHP异常处理问题,我又重新梳理了之前模糊的概念,希望对大家理解PHP异常处理有所帮助. 请一定要注意 ...
- Consul集群Server+Client模式
Consul集群Server+Client模式 架构示意图 只使用Consul的Server模式有以下2个问题: 因为Consul Server数量受到控制所以压力承载(扩展性)是个问题. Serve ...
- Arrays.asList使用指南和一些坑(转)
一.java.util.Arrays.asList() 的一般用法 List 是一种很有用的数据结构,如果需要将一个数组转换为 List 以便进行更丰富的操作的话,可以这么实现: String[] m ...
- python Calendar 模块导入及用法
Calendar 是python 日历模块,此模块的函数都是日历相关的,例如打印某月的字符月历,星期之类的模块,下面剖析python Calendar 模块导入及用法. 1,python导入日历模块 ...
- 不想用ubuntu了,换个系统manjaro - change
# 下载 https://mirrors.tuna.tsinghua.edu.cn/osdn/storage/g/m/ma/manjaro/xfce/ # usb启动盘 rufus # 中文字体 pa ...
- kali优化配置(3)--工具箱
1.netcat 收集信息.Telnet/banner.传输文本信息.连接服务器端口. *通过IP,连接服务器端口: *信息通信: *重定向符号:> (e.g:>>ps.txt:重定 ...
- pg_ctl - 启动,停止和重启 PostgreSQL 服务器
SYNOPSIS pg_ctl start [ -w ] [ -s ] [ -D datadir] [ -l filename] [ -o options] [ -p path] pg_ctl sto ...