[React] Update Component State in React With Ramda Lenses
In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use over
to apply the existing state value to a utility function and we'll get back a new state that will be reflected in our rendered UI.
We have code here, and we are going to improve the code:
//@flow import React from 'react';
import {inc, dec} from 'ramda'; export default class Counter extends React.Component { state = {
count: 0
}; increase = () => {
this.setState((prevState) => {
return {
count: inc(prevState.count)
};
})
}; decrease = () => {
this.setState((prevState) => {
return {
count: dec(prevState.count)
}
})
}; render() {
return (
<div>
<button onClick={this.increase}>+</button>
{this.state.count}
<button onClick={this.decrease}>-</button>
</div>
);
} }
First, we can use Ramda lense to update code, if the component's state contains only one prop, it is ideal to use lense to create reusable method:
import {inc, dec, lensProp, over} from 'ramda'; // Using Lense
const countLens = lensProp('count'); export default class Counter extends React.Component { state = {
count: 0
}; increase = () => this.setState(
(prevState) => over(countLens, inc, prevState)
); decrease = () => this.setState(
(prevState) => over(countLens, dec, prevState)
);
Because Ramda's method are auto currying, so we can write like:
increase = () => this.setState(over(countLens, inc)); decrease = () => this.setState(over(countLens, dec));
Second, it is recommended to pull out busniess logic out of component, so we can do:
//@flow import React from 'react';
import {inc, dec, lensProp, over} from 'ramda'; // Using Lense
const countLens = lensProp('count');
const increase = over(countLens, inc);
const decrease = over(countLens, dec); export default class Counter extends React.Component { state = {
count: 0
}; increase = () => this.setState(increase); decrease = () => this.setState(decrease); render() {
return (
<div>
<button onClick={this.increase}>+</button>
{this.state.count}
<button onClick={this.decrease}>-</button>
</div>
);
} }
[React] Update Component State in React With Ramda Lenses的更多相关文章
- [React] Update Application State with React Apollo ApolloConsumer Component
In this lesson I refactor some code that utilizes the Mutation component to update client-side cache ...
- React 手稿 - Component state
Component state 实例: import React, { PureComponent } from 'react'; export default class extends PureC ...
- [React] Create component variations in React with styled-components and "extend"
In this lesson, we extend the styles of a base button component to create multiple variations of but ...
- [React] Update State in React with Ramda's Evolve
In this lesson we'll take a stateful React component and look at how we can refactor our setState ca ...
- [React] Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3
getDerivedStateFromProps is lifecycle hook introduced with React 16.3 and intended as a replacement ...
- [Mobx] Using mobx to isolate a React component state
React is great for diffing between Virtual-DOM and rendering it to the dom. It also offers a naïve s ...
- A Bite Of React(2) Component, Props and State
component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome ...
- React & update state with props & Object.assign
React & update state with props & Object.assign Object.assign({}, oldObj, newObj) https://re ...
- [React] React Fundamentals: Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
随机推荐
- Java学习笔记六 常用API对象二
1.基本数据类型对象包装类:见下图 public class Test { public static void main(String[] args){ Demo(); toStringDemo() ...
- uiautomator——第一个例子:打开浏览器,输入网址
1.在sdk安装目录:E:\Test_Tools\auto_test\app\adt-bundle-windows-x86-20131030\sdk\tools下启动uiautomatorviewer ...
- InstallShield详细制作说明(二)
四.设置安装的组件Component
- Android平台中的三种翻页效果机器实现原理
本文给开发者集中展现了Android平台中的三种翻页效果机器实现原理,希望能够对开发者有实际的帮助价值! 第一种翻页效果如下: 实现原理: 当前手指触摸点为a,则 a点坐标为(ax,ay), ...
- Flask项目之手机端租房网站的实战开发(七)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...
- 【CS Round #46 (Div. 1.5) B】Letters Deque
[链接]h在这里写链接 [题意] 让你把一个正方形A竖直或水平翻转. 问你翻转一次能不能把A翻转成B [题解] 有说一定要恰好为1次. 并不是说A和B相同就一定不行. [错的次数] 2 [反思] 自己 ...
- 如何使用 PyCharm 将代码上传到远程服务器上(详细图解)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一丶测试说明 1.通过Windows电脑上的PyCharm,将代码上传到虚拟机Ubuntu系统中 需要在虚拟机中安装Ubuntu的 ...
- 资源下载https://msdn.itellyou.cn/
资源下载https://msdn.itellyou.cn/ 迅雷
- 辛星彻底帮您解决CSS中的浮动问题
浮动,是CSS布局中必须经过的一道坎,假设不熟悉浮动.那么CSS的布局就如同空中楼阁,而谈到浮动,很多其它的是和div相结合,div是一个块级元素.这个我前面的博文有介绍,假设大家喜欢我的风格,能够搜 ...
- 【拆分版】 Docker-compose构建Logstash多实例,基于7.1.0
[拆分版]Docker-compose构建Logstash多实例 写在最前 说起Logstash,这个组件并没有什么集群的概念,与其说是集群,不如说是各自去收集日志分析过滤存储到Elasticsear ...