gpt4 book ai didi

javascript - 使用带有自定义 Hook 的 useContext 与 useContext + useReducer

转载 作者:行者123 更新时间:2023-12-05 04:39:23 25 4
gpt4 key购买 nike

最近进入一个项目,在react中的useContext看到了以前没见过的东西。

项目中的全局状态使用它发送到上下文的钩子(Hook),然后当稍后在全局状态上调用该钩子(Hook)时,全局状态是可访问的。我看到的问题是在一个地方没有定义全局状态,您可以创建一个带有状态和更新函数的 Hook ,将其发送给提供者并在项目的任何地方访问它。

代码:

const initialState = {
id: "MyId",
currency: 'currency',
};


function useCurrencyState() {
initialState.currency = 'newCurrency'
const [currency, setCurrency] = React.useState(initialState);

return {
currency
};
}


export const [useCurrency, CurrencyStoreProvider] = createStoreProvider(useCurrencyState);

提供商:

export function createStoreProvider(useHook) {
const [useContextConsumer, ContextProvider] = generateContext();

const StoreProvider = ({ children }) => {
const state = useHook();

return <ContextProvider value={state}>{children}</ContextProvider>;
};

return [useContextConsumer, StoreProvider];
}

生成上下文函数:

export function generateContext() {
const context = React.createContext(undefined);

const useContextConsumer = () => {
const c = React.useContext(context);
if (!c) {
throw new Error('Component must be wrapped with <Container.Provider>');
}
return c;
};

return [useContextConsumer, context.Provider];
}

商店:

const StoreProvider = ({ children }) => (
<CurrencyStoreProvider>
{children}
</CurrencyStoreProvider>
);

export default StoreProvider;

当您想使用 useCurrency 时

import { useCurrency } from 'store/currency';

const { currency} = useCurrency ();

上面的例子是一个钩子(Hook)。该项目有 4 个遵循相同的模式,并且该项目有 4 个嵌套的提供者/上下文。

我最初的想法是,它正在匿名改变状态,因为它没有全局定义的状态,也没有捕捉 Action 以更新全局状态的缩减器。

我说的对吗?这是不那么推荐的处理状态的方法吗?如果我觉得这个模式有名字,它叫什么?

我正要建议更改为使用 context + useReducer 和 action 和 dispatch,但我需要更好地理解上述内容。

编辑:

为清楚起见:provders 是这样嵌套的:

const StoreProvider = ({ children }) => (
<CurrencyProvider>
<UserStoreProvider>
<CartStoreProvider>
<NotificationsStoreProvider>
{children}
</NotificationsStoreProvider>
</CartStoreProvider>
</UserStoreProvider>
</CurrencyProvider>
);

我对这种方法持怀疑态度,拥有一个上下文并使用 useReducer/Redux 来管理状态更新会更有效吗?

我想上面的例子(编辑部分)是为了防止在状态更新时重新渲染,如果你不使用 reducer ,这可能是有意义的。

最佳答案

上面提供的代码示例有两部分。一种是状态管理(使用 useState 完成),第二种是状态提供程序(使用上下文完成)。让我们分别讨论它们。

一般来说,useStateuseReducer和Redux reducer都是一样的。它们都允许拥有一些状态并基于它渲染组件。它们在允许操纵状态的方式上有所不同,尤其是在复杂情况下。

  1. useState 是最简单的方法。你所能做的就是
  const [state, setState] = useState()
setState(/* some new state */)
// or
setState(prevState => ({ ...prevState, /* some new state */ }))

操作状态时很难添加逻辑。 IE。如果你想在调用 setCurrency 之前进行货币转换,你应该在某个地方进行,或者编写自定义 Hook 。这个自定义钩子(Hook)将是您对 Redux 操作的实现。

执行异步代码(获取汇率)会更加困难。不要忘记在 useEffect 中获取速率是不够的,因为您必须处理服务器错误(5xx 或 4xx)并向用户显示适当的消息。要存储错误,您可能需要额外的状态,或将其放入货币状态。

遵循这种复杂状态的方法将引导您自己编写 Redux。

  1. useReducer(这是 React reducer,不是 Redux)允许使用操作来操纵复杂状态。 IE。您将能够分别发送 SET_CURRENCY 操作和 SET_RATES 操作,useReducer 将相应地更新状态。但它没有任何异步代码逻辑(即从服务器获取速率)。您应该使用自定义 Hook 自行编写。

  2. Redux 是处理状态的最复杂方法。它允许使用操作更新部分状态并处理异步操作。如果您考虑使用 Redux Toolkit 这样的库,您将能够从项目中删除大量样板代码并处理复杂的状态更新逻辑。

根据我的经验,useState 用于简单状态,例如打开的对话框。所有其他状态都转到 Redux。

另外,我可以提到表单的状态,它可以用像 Reach Hook Forms 这样的库来操作。 . React 钩子(Hook)表单将在内部保存表单特定状态并为您提供表单特定状态,如错误、触摸、提交计数等。

所提供示例中的第二部分是状态提供程序部分。它是根据上下文完成的。这是预料之中的,因为 useState 没有建议将状态传递给组件。 Redux 也使用上下文,但它是由 React-Redux 库为您创建的。此外,React-Redux 将为您提供有用的工具,例如 useSelector 以仅选择部分状态。 React 上下文没有任何选择器。它会给你完整的状态,你必须使用 useMemo 来获取部分状态并将其传递给较低级别​​的组件。同样,它类似于自己编写 React-Redux 库。

最后一个问题。提供的代码中没有使用方法的名称或模式。一些开发人员只是为一个项目发明了它。在我看来,这种方法没有什么有趣的地方。

关于javascript - 使用带有自定义 Hook 的 useContext 与 useContext + useReducer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70455690/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com