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的更多相关文章

  1. [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 ...

  2. React 手稿 - Component state

    Component state 实例: import React, { PureComponent } from 'react'; export default class extends PureC ...

  3. [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 ...

  4. [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 ...

  5. [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 ...

  6. [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 ...

  7. A Bite Of React(2) Component, Props and State

    component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome ...

  8. React & update state with props & Object.assign

    React & update state with props & Object.assign Object.assign({}, oldObj, newObj) https://re ...

  9. [React] React Fundamentals: Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

随机推荐

  1. Java学习笔记六 常用API对象二

    1.基本数据类型对象包装类:见下图 public class Test { public static void main(String[] args){ Demo(); toStringDemo() ...

  2. uiautomator——第一个例子:打开浏览器,输入网址

    1.在sdk安装目录:E:\Test_Tools\auto_test\app\adt-bundle-windows-x86-20131030\sdk\tools下启动uiautomatorviewer ...

  3. InstallShield详细制作说明(二)

    四.设置安装的组件Component

  4. Android平台中的三种翻页效果机器实现原理

    本文给开发者集中展现了Android平台中的三种翻页效果机器实现原理,希望能够对开发者有实际的帮助价值! 第一种翻页效果如下:     实现原理: 当前手指触摸点为a,则 a点坐标为(ax,ay), ...

  5. Flask项目之手机端租房网站的实战开发(七)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  6. 【CS Round #46 (Div. 1.5) B】Letters Deque

    [链接]h在这里写链接 [题意] 让你把一个正方形A竖直或水平翻转. 问你翻转一次能不能把A翻转成B [题解] 有说一定要恰好为1次. 并不是说A和B相同就一定不行. [错的次数] 2 [反思] 自己 ...

  7. 如何使用 PyCharm 将代码上传到远程服务器上(详细图解)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一丶测试说明 1.通过Windows电脑上的PyCharm,将代码上传到虚拟机Ubuntu系统中 需要在虚拟机中安装Ubuntu的 ...

  8. 资源下载https://msdn.itellyou.cn/

    资源下载https://msdn.itellyou.cn/  迅雷

  9. 辛星彻底帮您解决CSS中的浮动问题

    浮动,是CSS布局中必须经过的一道坎,假设不熟悉浮动.那么CSS的布局就如同空中楼阁,而谈到浮动,很多其它的是和div相结合,div是一个块级元素.这个我前面的博文有介绍,假设大家喜欢我的风格,能够搜 ...

  10. 【拆分版】 Docker-compose构建Logstash多实例,基于7.1.0

    [拆分版]Docker-compose构建Logstash多实例 写在最前 说起Logstash,这个组件并没有什么集群的概念,与其说是集群,不如说是各自去收集日志分析过滤存储到Elasticsear ...