使用useReducer更新状态

Question

我试着学习反应，我总是有点困惑什么时候反应更新状态。在下面的应用程序中，我有一个带有正负按钮的计数器，当数字为正时，我希望计数器有一个样式，当数字为负值时，要有一个不同的样式。因此，我有两个状态变量，值和样式，我使用useReducer更新它们。这似乎有效，但我这样做正确吗？有更好的方法吗？

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

通常，您希望保持状态下所需的最小信息量。伯爵是个州。样式可以是从计数状态派生的变量。它不需要成为国家的一部分。

就我个人而言，我不会在这种情况下使用useReducer。当然可以但没必要。您可以将其简化为：

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

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