Using useReducer to update state

Question

I am trying to learn react and I am always a bit confused about when react updates the state. In the following application I have a counter with plus and minus buttons and I want the counter to have one styling when the number is positive and a different styling when it is negative. So I have two state variables, value and styling, and I am using useReducer to update them. It seems to work but am I doing it the right way? Is there a better way of doing this?

import React, { useReducer, useState } from "react"
import classes from "./Home.module.css"

const ACTIONS = ["increment", "decrement"]

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS[0]:
            return { count: state.count + 1, styling: state.count+1>=0 ? "green" : "red" }
        case ACTIONS[1]:
            return { count: state.count - 1, styling: state.count-1>=0 ? "green" : "red"  }
        default:
            return { state }
    }
}

const Home = (props) => {
    const [state, dispatch] = useReducer(reducer, { count: 0, styling: "green" })

    const add = () => {
        dispatch({type: ACTIONS[0]})
    }

    const subtract = () => {
        dispatch({type: ACTIONS[1]})
    }


    

    return (
        <div className={classes.home}>
            <button className={classes.button} onClick={add}>
                +
            </button>
            <p className={`${classes.num} ${classes[`${state.styling}`]}`}>{state.count}</p>
            <button className={classes.button} onClick={subtract}>-</button>
        </div>
    )
}

export default Home

Answer 1

In general you want to keep the minimum amount of information that you need in state. The count is a state. The styling can be a variable which is derived from the state of count. It does not need to be part of state.

Personally I would not use useReducer in this situation. Obviously you can but it’s not necessary. You can simplify it to this:

const [count, setCount] = useState(0);
 
const add = () => setCount(prevCount => prevCount + 1);
 
const subtract = () => setCount(prevCount => prevCount - 1);

const styling = count >= 0 ? “green” ? “red”;