In this lesson we'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolvefunction to make our updater function a reusable utility that isn't tied to the React API.

//@flow

import React from 'react';
import {inc, dec, lensProp, over, evolve, multiply} from 'ramda'; // Using Lense
const countLens = lensProp('count');
const increase = over(countLens, inc);
const decrease = over(countLens, dec);
const doubleCount = evolve({count: multiply(2)}); export default class Counter extends React.Component { state = {
count: 0
}; increase = () => this.setState(increase); decrease = () => this.setState(decrease); double = () => this.setState(doubleCount); render() {
return (
<div>
<button onClick={this.increase}>+</button>
{this.state.count}
<button onClick={this.decrease}>-</button>
<button
disabled={this.state.count === 0}
onClick={this.double}
>*2</button>
</div>
);
} }

[React] Update State in React with Ramda's Evolve的更多相关文章

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

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

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

  3. react 中state与props

    react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...

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

  5. [React Native] State and Touch Events -- TextInput, TouchableHighLight

    In React, components manage their own state. In this lesson, we'll walk through building a component ...

  6. [React] React Fundamentals: State Basics

    State is used for properties on a component that will change, versus static properties that are pass ...

  7. React中state与props介绍与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

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

  9. React给state赋值的两种写法

    如果你看过React的官方文档,就会对怎么给局部state赋值有一定的了解.如下代码: class Test extends React.Component { constructor(props) ...

随机推荐

  1. 洛谷 P1032 字符变换

    洛谷 P1032 字符变换 题目描述 已知有两个字串 A,B 及一组字串变换的规则(至多 6 个规则): A1​ -> B1​ A2​ -> B2​ 规则的含义为:在 A 中的子串 A1​ ...

  2. 【Codeforces Round #429 (Div. 2) A】Generous Kefa

    [Link]:http://codeforces.com/contest/841/problem/A [Description] [Solution] 模拟,贪心,每个朋友尽量地多给气球. [Numb ...

  3. 上传excel数据到数据库中

    上传excel表格数据到数据库 导入固定路径下的excel数据到数据库 <form id="disposeFlightDataForm" action="../up ...

  4. ASP.Net MVC Filter验证用户登录

    一.Filter是什么 ASP.NetMVC模式自带的过滤器Filter,是一种声明式编程方式,支持四种过滤器类型,各自是:Authorization(授权),Action(行为),Result(结果 ...

  5. CView::OnPreparePrinting

    http://technet.microsoft.com/zh-cn/subscriptions/a59dff1e(v=vs.71).aspx CView::OnPreparePrinting Cal ...

  6. How to Rotate Tomcat catalina.out

    If catalina.out becomes 2GB in size, tomcat crashes and fails to start without any error message. To ...

  7. Nginx分发服务

    nginx配置分发tomcat服务 http://blog.csdn.net/yan_chou/article/details/53265775 http://www.cnblogs.com/deng ...

  8. 洛谷——P1179 数字统计

    https://www.luogu.org/problem/show?pid=1179 题目描述 请统计某个给定范围[L, R]的所有整数中,数字 2 出现的次数. 比如给定范围[2, 22],数字 ...

  9. (转) 设置sqlplus中的退格键

    转自:http://blog.itpub.net/26110315/viewspace-717249/ 有些时候当你使用sqlplus登录到数据库中的时候,敲错了命令想要删除修改的时候,发现以前敲入的 ...

  10. 11.4 Android显示系统框架_APP与SurfaceFlinger内部机制分析

    4.1 APP跟SurfaceFlinger之间的重要数据结构 一个应用程序有一个或者多个surface(一般只有一个),一个surface有一个或者多个buffer,这些buffer需要应用向sur ...