首页 > 其他 > 详细

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

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!