Блог

я попробовал этот шаблон включения функции диспетчеризации в свою функцию редуктора, но я получил это, независимо от того, что я пытаюсь увеличить или уменьшить, чего мне не хватает, в основном создание вспомогательного метода в моей функции редуктора для лучшего подхода к api может быть не лучшим подходом, но, по крайней мере, я пробовал по-другому, в чем проблема, которой мне не хватает, чтобы это работало [простите мой английский]

 import * as React from 'react';

const CounterContext = React.createContext();

function CounterProvider({ step = 1, initialCount = 0, ...props }) {
    const [state, dispatch] = React.useReducer(
        (state, action) => {
            const change = action.step ?? step
            switch (action.type) {
                case 'increment': {
                    return { ...state, count: state.count   change }
                }
                case 'decrement': {
                    return { ...state, count: state.count - change }
                }
                default: {
                    throw new Error(`Unhandled action type:${action.type}`)
                }
            }
        },
        { initialCount: initialCount })
    const increment = React.useCallback(() => dispatch({ type: 'increment' }), [
        dispatch
    ])
    const decrement = React.useCallback(() => dispatch({ type: 'decrement' }), [
        dispatch
    ])

    const value = { increment, decrement, state }
    return <CounterContext.Provider value={value} {...props} />
}

function useCounter() {
    const context = React.useContext(CounterContext)
    if (context === undefined) {
        throw new Error('useCounter must be used within CounterProvider')
    }
    return context
}

function Counter() {
    const { state, increment, decrement } = useCounter();
    console.log(state, 'inc ', increment, 'dec ', decrement)
    return (
        <div>
            <button onClick={decrement}>-</button>
            <button onClick={increment}> </button>
            <div>Current Count: {state.count}</div>
        </div>
    )
}
function App() {
    return (
        <CounterProvider>
            <Counter />
        </CounterProvider>
    )
}
export default App
 

Потому что вы передаете initial значение есть { initialCount: initialCount } . Так что у тебя нет count . Просто обновите до count

 { count: initialCount }
 

Это просто, вам просто нужно обновить свой { initialCount: начальный счет } для подсчета, чтобы получить значение.

Это должно выглядеть так { count: начальный счет }