redux简单使用逆战班

一. redux的使用:
1)首先安装两个包 yarn add redux react-redux 注释：yarn add xxx相当于 npm xxx --save
2）redux的初级使用安装成功后，在项目根目录src文件夹下创建一个如 store的文件夹创建index.js和reducer.js文件注意：store里面的reducer是总的reducer
3）在项目跟目录src下创建一个文件夹componts用来存放我们的模块文件，里面创建一个one文件夹，里面新建一个index.js和reducer.js文件
在src目录下的App.js文件里面引入我们的one组件并渲染
4）在store文件夹下面的index.js代码如下

5）one组件下面的reducer.js文件代码如下

这样如果发出了动作就可以使n加一了，使用键值对的形式更新n值
index.js文件里面创建一个基本的类组件

注释：如果vscode安装了 ES7redux插件输入rxx就可以快捷创建一个基本redux文件 case 后面的必须是一个常量，使用’'包裹起来
6）store文件下的index.js代码如下

导入组件下面的reducer文件使用，然后导出
7）在src目录下的indes.js引入redux import {Provider} from ‘react-redux’
引入总的redux import store from ‘./store’
引入 router import{BrowserRouter as Router} from ‘react-router-dom’

注：Provider为什么可以向App组件提供store? 是因为connect是通过Provider去提供store，然后通过上下文拿到这个store，就可以消费了

8）在one组件的index.js文件修改为以下代码

这样我们就取得了仓库里的n值
注：connect的作用是连结容器组件到ui组件

二.以上是取出仓库的值并渲染，下面我们做一个简单操作，使一个按钮被点击时让n加一
1).在one组件里新建一个actionCreator.js文件
代码如下

2)one组件下的index.js文件下引入 import actionCreator from ‘./actionCreator.js’
导出代码修改为 export default connect(mapState,actionCreator)(One)；这相当于把actionCreator方法映射过来了

现在我们启动项目后，点击+号按钮，就可以将n值加一了

redux简单使用逆战班相关推荐

千锋逆战班学习日志Day47
千锋逆战班学习第47天表单标签 CSS介绍二.CSS和HTML结合 2.1CSS和HTML结合之内联结合 2.2CSS与HTML结合之内部部结合 2.3CSS和HTML结合之外部结合三.访问路径 ...
千锋逆战班学习第二十五天
千锋逆战班学习第25天努力或许没有收获,但不努力一定没收获,加油. 今天我学了Java课程的集合. 中国加油!!!武汉加油!!!千锋加油!!!我自己加油!!! 4.有如下代码: public cla ...
千锋逆战班学习第二十三天集合练习（一）
千锋逆战班在千锋"逆战"学习第23天, 每个人生阶段都需要努力去扮好自己的角色,越努力越轻松,越坚强越幸运! 加油! 2(List)有如下代码 import java.util. ...
千锋逆战班学习第二十四天
千锋逆战班在千锋"逆战"学习第24天, 每个人生阶段都需要努力去扮好自己的角色,越努力越轻松,越坚强越幸运! 加油! 1(Object类)有下面代码 interface IA{v ...
课表排班java_初学OptaPlanner-02- 基于Spring Boot实现一个简单课程表排班的实例
Spring Boot Java quick start 01. 排班目标作出一个简单的课程表timetable,示例如下: 时间表的类图 02. Opta的常用注解说明, 关键实体类说明 @Pla ...
delete可以传body吗_最简单的易班打卡脚本！可以自动打卡了
易班web自动化打卡脚本一直以来,易班打卡被称为最鸡肋,最浪费时间,最浪费纳税人钱财的表面工程,那么如何解决这一问题,已成为现在高校大学生的急需思考的大问题.那这一次我就来谈谈我是怎么解决这一问题的 ...
python自动点赞软件_python requests 简单实现易班登录，自动点赞，评论，发表
小编能力有限,本文纯属瞎编,如有雷同,你去打辅导员涩一.前戏有个操蛋,操蛋,操蛋的辅导员促使小编成长,原因:易班需要活跃度,辅导员安排班上每个人必须去易班上写文章,写评论,发投票... 我觉得 ...
php实现易班登录,简单的易班申请授权以及使用方式
//以下三个变量内容需换成本应用的$APPID = ""; //在open.yiban.cn管理中心的AppID$APPSECRET = ""; //在open ...
#千锋逆战班 Java
当你成功的时候,你说的话都是真理. 4. public static void main(String[] args) {List<String> list=new ArrayList&l ...

redux简单使用逆战班

redux简单使用逆战班相关推荐

最新文章

热门文章

redux简单使用 逆战班

redux简单使用 逆战班相关推荐

最新文章

热门文章

redux简单使用逆战班

redux简单使用逆战班相关推荐