我使用 useReducer 编写了一个自定义状态挂钩。使用起来有危险吗？（反应 T）

Question

我不想使用单个状态变量或使用功能组件更新整个状态。我编写了一个基于 useReducer 的钩子，如下所示，但我不确定可能的危险影响。安全吗？谢谢。

import React, { useReducer } from "react";

export function useCustomState<T>(initialState: T) {
    const reducer: React.Reducer<T, Partial<T>> = (prevState, newState) => ({
        ...prevState,
        ...newState,
    });

    return useReducer(reducer, initialState, (state) => state);
}

Answer 1

这并不危险，但我认为这也不是实现目标的最佳方式。您似乎不了解应该使用useState其中之一useReducer和何时应该使用其中之一之间的区别。

“reducer”是一个函数，它接受先前的状态和“动作”并返回一个新的状态。该操作意味着是一条指令而不是一个状态——减速器的工作是根据该指令确定下一个状态。一个动作通常看起来像{type: 'LOGGED_OUT'}或{type: 'LOGGED_IN', payload: { userId: 12345, username: 'Some One' }。

在您的情况下，您的“操作”是您想要与现有状态浅层合并的新状态。在我看来，你最好使用它useState来实现这一目标。

export function useCustomState<T>(initialState: T) {
    const [state, setState] = useState(initialState);

    const update = (newState: Partial<T>) =>
        setState(prevState => ({
            ...prevState,
            ...newState,
        }));

    return [state, update]
}

该钩子返回一个与典型元组类似的元组[state, setState]，不同之处在于该update函数可以接受将与现有状态合并的部分状态。