在 useReducer 内部使用 React 使用钩子（useContext）

Question

我在 useContext/provider 中有一个减速器。我需要使用另一个提供者的值来验证操作。有没有办法从 useReducer 挂钩中的 Provider 检索这些值？或者我是否必须尝试将它们作为函数参数提供。例如：

减速机

export default function reducer(state: State, action: Action): State {
    switch(action.type) {
        case "set-amount": {
            const { amount } = action.state
            const { maxAmount } = useFooContext()

            if (amount > maxAmount) // do something

            return { ...state, amount }
        }
    }
}

提供商

export function Provider(...) {
    const [state, dispatch] = useReducer(reducer, {}, initState)
    return ...
}

Answer 1

不能在嵌套函数中调用React钩子，这违反了React的Hooks规则，只能在React函数和自定义钩子中调用顶层的钩子。

我建议重写reducer函数，在实例化时对Foo上下文值进行柯里化。

示例：

const reducer = (fooContext: FooContext) => (state: State, action: Action) => {
  switch(action.type) {
    case "set-amount": {
      const { amount } = action.state;
      const { maxAmount } = fooContext;

      if (amount > maxAmount) // do something

      return { ...state, amount }
    }

    ...
  }
};

export default reducer;

export function Provider(...) {
  const fooContext = useFooContext();

  const reducerFn = useMemo(() => reducer(fooContext), []);

  const [state, dispatch] = useReducer(reducerFn, {}, initState);

  return ...
}

如果您需要访问非静态值，那么您可以返回

fooContext

可以访问的“getState”方法，或者将

fooContext

保存到传递给柯里化减速器函数的 React 引用中，以便它可以访问当前的任何内容上下文值是每次。