[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:

//@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>
        );
    }

}