Example of simplified and normal use of useReducer

Flexible useReducer Counter.js

//Using action.payload to have a flexible data

import React, { useReducer } from 'react'
import { Button, ButtonGroup, Badge } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
const initialState = {
    counter1: 0,
    counter2: 10
}
const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return { ...state, counter1: state.counter1 + action.payload }
        case 'decrement':
            return { ...state, counter1: state.counter1 - action.payload }
        case 'increment2':
            return { ...state, counter2: state.counter2 + 1 }
        case 'decrement2':
            return { ...state, counter2: state.counter2 - 1 }
        case 'reset':

            return initialState

        default:
            return state;
    }
}
const Counter = () => {
    const [count, dispatch] = useReducer(reducer, initialState)
    return (
        <div>

            <ButtonGroup>
                <Button color="primary" outline>
                    Counter1 <Badge color="secondary">{count.counter1}</Badge>
                </Button>
                <Button color="primary" outline>
                    Counter2 <Badge color="secondary">{count.counter2}</Badge>
                </Button>
            </ButtonGroup>
            <p></p>
            <ButtonGroup>
                <Button color="dark" onClick={() => dispatch({ type: 'increment', payload: 1 })}>increment</Button>
                <Button color="dark" onClick={() => dispatch({ type: 'decrement', payload: 1 })}>decrement</Button>
            </ButtonGroup>
            <p></p>
            <ButtonGroup>
                <Button color="dark" onClick={() => dispatch({ type: 'increment', payload: 5 })}>increment 5</Button>
                <Button color="dark" onClick={() => dispatch({ type: 'decrement', payload: 5 })}>decrement 5</Button>
            </ButtonGroup>
            <p></p>
            <ButtonGroup>
                <Button color="dark" onClick={() => dispatch({ type: 'increment2' })}>increment counter2</Button>
                <Button color="dark" onClick={() => dispatch({ type: 'decrement2' })}>decrement counter2</Button>
            </ButtonGroup>
            <p></p>
            <Button color="danger" onClick={() => dispatch({ type: 'reset' })}>reset</Button>

        </div>
    )
}

export default Counter

Multiple useReducer Counter.js

//Using action.payload to have a flexible data

import React, { useReducer } from 'react'
import { Button, ButtonGroup, Badge } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
const initialState = {
    counter: 0,
}
const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return { ...state, counter: state.counter + action.payload }
        case 'decrement':
            return { ...state, counter: state.counter - action.payload }
        case 'reset':

            return initialState

        default:
            return state;
    }
}
const Counter = () => {
    const [state1, dispatch1] = useReducer(reducer, initialState);
    const [state2, dispatch2] = useReducer(reducer, initialState);
    return (
        <div>

            <ButtonGroup>
                <Button color="primary" outline>
                    Counter1 <Badge color="secondary">{state1.counter}</Badge>
                </Button>
                <Button color="primary" outline>
                    Counter2 <Badge color="secondary">{state2.counter}</Badge>
                </Button>
            </ButtonGroup>
            <p></p>
            <ButtonGroup>
                <Button color="dark" onClick={() => dispatch1({ type: 'increment', payload: 1 })}>increment</Button>
                <Button color="dark" onClick={() => dispatch1({ type: 'decrement', payload: 1 })}>decrement</Button>
                <Button color="danger" onClick={() => dispatch1({ type: 'reset' })}>reset</Button>
            </ButtonGroup>
            <p></p>
            <ButtonGroup>
                <Button color="dark" onClick={() => dispatch2({ type: 'increment2' })}>increment</Button>
                <Button color="dark" onClick={() => dispatch2({ type: 'decrement2' })}>decrement</Button>
                <Button color="danger" onClick={() => dispatch2({ type: 'reset' })}>reset</Button>
            </ButtonGroup>
            <p></p>
            

        </div>
    )
}

export default Counter

Simplified useReducer Counter.js

import React, { useReducer } from 'react'
import { Button, ButtonGroup } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
const initialState = 0
const reducer = (state, action) => {
    switch (action) {
        case 'increment':
            return state + 1
        case 'decrement':
            return state - 1
        case 'reset':

            return initialState

        default:
            return state;
    }
}
const Counter = () => {
    const [count, dispatch] = useReducer(reducer, initialState)
    return (
        <div>
            <div>{count}</div>
            <ButtonGroup>
                <Button color="dark" onClick={() => dispatch('increment')}>increment</Button>
                <Button color="dark" onClick={() => dispatch('decrement')}>decrement</Button>
                <Button color="danger" onClick={() => dispatch('reset')}>reset</Button>
            </ButtonGroup>
        </div>
    )
}

export default Counter