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
原文：http://www.cnblogs.com/Answer1215/p/6741675.html