首页 > 代码库 > [React] Update Component State in React With Ramda Lenses
[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. 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:
//@flowimport 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 Lenseconst 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:
//@flowimport React from ‘react‘;import {inc, dec, lensProp, over} from ‘ramda‘;// Using Lenseconst 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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。