在前面的随便中有简单的使用过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的使用和按需加载,在前面的随便有详细介绍。

TodoList.js
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仓库

 首先,在src文件夹下新建store文件夹,并在store文件夹中新建index.js和reducer.js。
 
 reducer.js

index.js

在上面的代码中,我们先是在reducer.js中,添加了一些默认的数据,然后暴露了一个用于修改数据的方法函数。

在index.js中,首先引入createStore方法,然后引入reducer后,创建了一个数据存储仓库,最后将这个仓库暴露出去。

组件获得store中的数据

 首先需要在组件中引入store,然后进行赋值就可以了。

数据改变

 想要改变redux里面的state的值,首先需要创建action,action是一个对象,包含两个属性:描述名称和要改变的值,然后通过dispatch()方法传递给store。以input框的onChange事件为例:

由于store只是一个仓库,所以在接收到action后,会自动转发给reducer,在reducer中有两个参数:state和action,其中state指的是原仓库的状态,二action指的是新传递的状态。在reducer中拿到新旧数据后,就可以根据action的type进行相应的改变了。但是,由于reducer只能接收state,不能改变state,所以需要声明一个新变量,然后用return返回回去。

 

现在,store里面的数据已经更新了,但是组件还没有更新,我们需要在组件的constructor里面订阅redux的状态,才能实时更新组件数据:

然后,继续按照这种方法修改添加和删除事件:

   

代码下载:点这里

 

redux简单使用的更多相关文章

  1. Flutter: redux简单使用

    Pub redux flutter_redux import 'package:flutter/material.dart'; import 'package:redux/redux.dart'; i ...

  2. 使用redux简单的实现加法运算(简单的状态改变)

    描述该做啥?(action)!具体怎么做(reducer)!统一规划(store:包含reducer+所有的state) 上代码:index.ios.js import React, { Compon ...

  3. React+Redux实现追书神器网页版

    引言 由于现在做的react-native项目没有使用到redux等框架,写了一段时间想深入学习react,有个想法想做个demo练手下,那时候其实还没想好要做哪一个类型的,也看了些动漫的,小说阅读, ...

  4. Redux和React-Redux的实现(一):Redux的实现和context

    react使用redux做状态管理,实现多个组件之间的信息共享,解决了父子组件.兄弟组件之间的复杂通信问题.vue有vuex,总之是一种flux的思想.react提供了react-redux这个库,一 ...

  5. 前端(十一):props、state及redux关系梳理

    所谓状态机,是一种抽象的数据模型,是“事物发展的趋势”,其原理是事件驱动.广泛地讲,世界万物都是状态机. 一.状态机是一种抽象的数据模型 在react中,props和state都可以用来传递数据.这里 ...

  6. 看了就学会之React redux入门示例

    环境准备 为了方便,这里使用create-react-app搭建react环境 create-react-app mydemo 弹出配置 如果需要自定义react的配置,需要运行下面的命令把配置文件弹 ...

  7. useReducer代替Redux小案例-1(七)

    使用useContext和useReducer是可以实现类似Redux的效果,并且一些简单的个人项目,完全可以用下面的方案代替Redux,这种做法要比Redux简单一些.因为useContext和us ...

  8. redux和dva

    实习的时候,公司使用的是react,react说实话生态学的还不是很完善,就暂时先不做跟react相关的博客,等以后学好了react全家桶之后,专门再总结一下react的内容 这两天看了公司的alit ...

  9. flutter Provide 状态管理篇

    Provide是Google官方推出的状态管理模式.官方地址为: https://github.com/google/flutter-provide 现在Flutter的状态管理方案很多,redux. ...

随机推荐

  1. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_07 Collections工具类_3_Collections集合工具类的方法

    第二个参数传递了一个匿名内部类.结果就出现了下面的代码 源码里面有Compare方法,对比两个参数 要重写比较的方法 对对象进行排序 创建学生类.对学生类进行排序 重写Person的ToString方 ...

  2. 伪造IP及获取客户端真实IP地址

    Fiddler支持自定义规则,可以实现对HTTP请求数据发送给Server前或HTTP应答数据发送给浏览器前进行修改.下面的例子将演示如何向所有HTTP请求数据中增加一个头.1)打开Fiddler,点 ...

  3. suv的使用

    一.什么是SVN? SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到 ...

  4. python_001

    一.python开发1.python基础 -基础 -基本数据类型 -函数 -面向对象2.网络编程3.web框架 -用于写网站4.设计模式 + 算法

  5. python控制流-流程控制语句

    一.if语句 if 语句的子句(也就是紧跟 if 语句的语句块), 将在语句的条件为 True 时执行.如果条件为 False,子句将跳过. 在英文中,if 语句念起来可能是“:如果条件为真,执行子句 ...

  6. 数据挖掘 workfolw 总结

    个人将数据挖掘的流程简单表示为“ 数据 → 特征 → 模型 ”.   首先,明确问题的性质和任务(分类.回归.聚类.推荐.排序.关联分析.异常检测等): 其次,理解数据(含义.类型.值的范围),并通过 ...

  7. 什么是 Python 的命名空间?

    在 Python 中,所有的名字都存在于一个空间中,它们在该空间中存在和被操作——这就是命名空间.它就好像一个盒子,每一个变量名字都对应装着一个对象.当查询变量的时候,会从该盒子里面寻找相应的对象.

  8. usleep和sleep

    usleep 和 sleep 都是用于将进程挂起, 所不同的是前者在微秒级别, 后者在秒级别.

  9. django实例收集

    django笔记(一)(模板渲染变量.字典.for循环.索引.条件语句) django笔记(二) django环境准备与笔记(三) django笔记(四) django笔记(五) Views的补充 w ...

  10. [转载]浅谈JavaScript函数重载

     原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...