[React] How to use a setState Updater Function with a Reducer Pattern
In this lesson we'll walk through setting up an updater function that can receive an action argument. We'll also dive into how to separate your state management logic into a separate reducer function much like how Redux operates. It will receive an action which we can add any data and update state accordingly.
import React, { Component } from "react"; const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT"; const reducer = action => (state, props) => {
switch (action.type) {
case INCREMENT:
return {
value: state.value + action.amount,
};
case DECREMENT:
return {
value: state.value - 1,
};
default:
return null;
}
}; class App extends Component {
state = {
value: 0,
};
increment = () => {
this.setState(
reducer({
type: INCREMENT,
amount: 2
}),
);
};
decrement = () => {
this.setState(
reducer({
type: DECREMENT,
}),
);
};
render() {
return (
<div>
<div>{this.state.value}</div>
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
);
}
} export default App;
[React] How to use a setState Updater Function with a Reducer Pattern的更多相关文章
- React源码解析:setState
先来几个例子热热身: ......... constructor(props){ super(props); this.state = { index: 0 } } componentDidMount ...
- React与Preact差异之 -- setState
Preact是React的轻量级实现,是React比较好的替代者之一,有着体积小的优点,当然与React之间一定会存在实现上的差异,本文介绍了在 setState 方面的差异之处. 源码分析 首先来分 ...
- react native 打包Ignoring return value of function declared with warn_unused_result attribute
从 github上下载 项目 用于学习查看别人的代码, 当执行完npm install 用xcode 打开 发现俩个错误提示Ignoring return value of function dec ...
- (文章也有问题,请自行跳过)react中的状态机每次setState都是重新创建新的对象,如需取值,应该在render中处理。
demo如下 class Demo4StateLearn extends React.Component { constructor(props) { super(props); this.state ...
- JavaScript Patterns 4.8 Function Properties - A Memoization Pattern
Gets a length property containing the number of arguments the function expects: function func(a, b, ...
- type Props={};
Components Learn how to type React class components and stateless functional components with Flow Se ...
- react 源码之setState
今天看了react源码,仅以记录. 1:monorepo (react 的代码管理方式) 与multirepo 相对. monorepo是单代码仓库, 是把所有相关项目都集中在一个代码仓库中,每个mo ...
- 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- React的setState分析
前端框架层出不穷,不过万变不离其宗,就是从MVC过渡到MVVM.从数据映射到DOM,angular中用的是watcher对象,vue是观察者模式,react就是state了. React通过管理状态实 ...
随机推荐
- oc15--文档安装
// // main.m // 修改项目模板 /* 工程名称: 文件名称: 创建者 : 创建时间: 版权 : 修改人 : 修改时间: */ #import <Foundation/Foundat ...
- Linux安装sshfs挂载远程目录到本地及卸载
挂载远程目录的方式很多,这里把sshfs记录一下备忘.Linux用sshfs挂载远程目录到本地 安装sshfs 在Ubuntu下,只需要使用 $ sudo apt-get install sshfs ...
- bzoj4240: 有趣的家庭菜园(树状数组+贪心思想)
4240: 有趣的家庭菜园 题目:传送门 题解: 好题!%%% 一开始不知道在想什么鬼,感觉满足二分性?感觉可以维护一个先单调增再单调减的序列? 然后开始一顿瞎搞...一WA 看一波路牌...树状数组 ...
- (Go)03.go类型
1.1 变量Go 是静态类型语⾔言,不能在运⾏行期改变变量类型.使⽤用关键字 var 定义变量,⾃自动初始化为零值.如果提供初始化值,可省略变量类型,由编译器⾃自动推断. var x int var ...
- Dvwa安装,配置(Linux)
文章演示使用系统:CenTOS7 一:搭建LAMP环境 使用XAMPP安装部署,下载地址:https://www.apachefriends.org/download.html 1.1:赋予账号对XA ...
- 关于打包压缩几种格式(gzip,bzip2,xz)的试验对比
要通过脚本进行备份,必然将会应用到压缩技术,这里简单针对几个常见的格式进行测验,从而得到一种合适的方式. 这里以一个应用目录做例子: [root@isj-test-5 mnt]$du -sh * 66 ...
- cloudfoundry service broker 制作
实验室这边需要制作service broker.从今天开始将精力投入其中.
- Arduino-OLED-四度显示
double Fahrenheit(double celsius) { ; } //摄氏温度度转化为华氏温度 double Kelvin(double celsius) { return celsiu ...
- Tomcat web deploy
环境: apache-tomcat-7.0.73 java version "1.8.0_112" 创建普通用户,使用 sudu进行操作 JDK 配置 下载地址:http://ww ...
- Redis之Ubuntu下Redis集群搭建
安装redis 首先下载redis $ wget http://download.redis.io/releases/redis-4.0.10.tar.gz $ .tar.gz $ cd redis- ...