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. ...
随机推荐
- delphi自定义事件处理
http://www.cnblogs.com/ywangzi/archive/2012/09/06/2673414.html delphi自定义事件处理 为什么我们点击按钮,就会执行按钮的oncl ...
- 从Android手机中取出已安装的app包,导出apk
从Android手机中取出已安装的app包,导出apk TAG:Android,提取,apk,adb,pm,root,导出apk 假设有这样一个场景,A君看到你手机上一个实用APP,想要安装到自己手机 ...
- MySQL 编码:utf8 与 utf8mb4,utf8mb4_unicode_ci 与 utf8mb4_general_ci
参考:mysql字符集小结 utf8mb4 已成为 MySQL 8.0 的默认字符集,在MySQL 8.0.1及更高版本中将 utf8mb4_0900_ai_ci 作为默认排序规则. 新项目只考虑 u ...
- JAVA AOP面向切面编程与动态代理
1.静态代理和动态代理的概念: 在我的另一篇博文:Java 静态代理和动态代理 中有讲到,这里就不做赘述了. JDK动态代理它的好处理是可以为我们生成任何一个接口的代理类,并将需要增强的方法织入到 ...
- SpringMVC起步(一)
SpringMVC起步(一) 笔记来源于慕课网:https://www.imooc.com/video/7126/0 MVC:Model-View-Controller Model:模型层,业务数据的 ...
- dom元素的自上而下自动滚动
dom元素的自上而下自动滚动 <!doctype html> <html lang="en"> <head> <meta charset= ...
- sql中的isnull
ISNULL 使用指定的替换值替换 NULL. 语法ISNULL ( check_expression , replacement_value ) 参数check_expression 将被检查是否为 ...
- Vue 基础 day02
Vue Devtools 安装 https://chrome.google.com/webstore/search/vue%20devtools?hl=zh-CN 需要翻墙 过滤器 概念: Vue.j ...
- WOJ#3836 Sightseeing Trip
描述 给定一张无向图,求图中一个至少包含 3 个点的环,环上的节点不重复,并且环上的边的长度之和最小.该问题称为无向图的最小环问题.在本题中,你需要输出最小环的方案,若最小环不唯一,输出任意一个均可. ...
- React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案
本文是学习了2018年新鲜出炉的React Hooks提案之后,针对异步请求数据写的一个案例.注意,本文假设了:1.你已经初步了解hooks的含义了,如果不了解还请移步官方文档.(其实有过翻译的想法, ...