码迷,mamicode.com
首页 > 其他好文 > 详细

[React] Update State in React with Ramda's Evolve

时间:2017-04-21 09:45:06      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:import   tle   with   cto   xtend   increase   from   component   factor   

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

标签:import   tle   with   cto   xtend   increase   from   component   factor   

原文地址:http://www.cnblogs.com/Answer1215/p/6741676.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!