因此，React 16.8中提供了挂钩。从他们的文档来看，Hooks可以作为功能组件中状态的替代者。基本挂钩是：useState，useEffect，useContext，但也有一些额外的钩子，其和为之一useReducer，它看起来像它使用相同的action-dispatch的终极版做架构。
问题是，是否由于相似而取代Redux？
是否更适合特定项目？
它适合哪里？
我有一个返回操作的自定义钩子。父组件“容器”利用自定义钩子并将动作作为道具传递给子组件。
当从子组件执行该操作时，实际的分派发生两次。现在，如果子级直接利用该钩子并调用了该动作，则调度仅发生一次。
如何复制它：
打开下面的沙箱，然后在chrome上打开devtools，这样您就可以看到我添加的控制台日志。
https://codesandbox.io/s/j299ww3lo5?fontsize=14
Main.js（儿童组件），您将看到我们调用props.actions.getData（）
在DevTools上，清除日志。在“预览”上，在表单上输入任何值，然后单击按钮。在控制台日志上，您将看到类似redux-logger的操作，并且您将注意到STATUS_FETCHING操作被执行了两次而没有更改状态。
现在转到Main.js并注释掉第9行和第10行的注释。我们现在基本上是在直接使用自定义钩子。
在DevTools上，清除日志。在“预览”上，在表单上输入任何值，然后单击按钮。现在，在控制台日志上，您将看到STATUS_FETCHING仅执行一次，并且状态会相应更改。
尽管没有明显的性能损失，但我不明白为什么会这样。我可能过于关注挂钩，而我却错过了一些愚蠢的事情……请把我从这个难题中解脱出来。谢谢！
前言/说明
我正在尝试将React的新挂钩函数用于我正在构建的电子商务网站，但是在解决购物车组件中的错误时遇到了问题。
我认为以我想通过使用多个Context组件保持全局状态模块化的事实作为开始讨论的重点。对于我提供的商品类型，我有一个单独的上下文组件，对于一个人的购物车中的商品，我有一个单独的上下文组件。
问题
我遇到的问题是，当我调度将组件添加到购物车的操作时，减速器将运行两次，就像我两次将商品添加到购物车一样。但是仅当它最初被渲染时，或者由于诸如显示之类的奇怪原因而被设置为hidden，然后又返回到block或由于z-index和可能的其他类似更改而改变。
我知道这有点冗长，但这是一个很挑剔的问题，因此我创建了两个演示该问题的代码笔：
您将看到我包含一个用于切换display组件的按钮。这将有助于展示CSS与问题的相关性。
最后，请用代码笔监视控制台，这将显示所有按钮的单击以及每个reducer的哪一部分已运行。在完整示例中，问题最明显，但在最小示例中，控制台语句显示了该问题。
问题区域
我已查明该问题与以下事实有关：我正在使用useContext挂钩的状态来获取项目列表。调用了一个函数来为我的useReducer钩子生成化简器，但是仅当使用了另一个钩子时才出现，我可以使用像钩子一样不会重新评估的函数，并且没有问题，但是我还需要我以前的上下文中的信息，因此解决方法无法真正解决我的问题。
相关连结
我已确定问题不是HTML问题，因此我将不包含我尝试过的HTML修复程序的链接。这个问题虽然是由CSS触发的，但并非植根于CSS，因此我也不会包含CSS链接。
在 React 应用程序中工作，我目前使用单个减速器定义了一些全局状态，但由于应用程序有点大，所以想引入多个减速器，因此在多个减速器上组织状态会更容易和更好！
目前我有：
import { StoreProvider } from './store'
const app = (
<StoreProvider>
<App />
</StoreProvider>
)
商店看起来像：
import React, { useReducer, createContext } from 'react'
import { ApplicantState } from './interfaces/ApplicantState'
import applicantReducer from './modules/Applicant/ApplicantReducer'
const initialState: ApplicantState = {
applicants: [],
total: 0,
}
export const GlobalStore = createContext<ApplicantState | any>(initialState)
export const StoreProvider = ({ children }: JSX.ElementChildrenAttribute): JSX.Element => {
const [state, dispatch] = useReducer(applicantReducer, initialState)
return <GlobalStore.Provider value={{ state, dispatch }}>{children}</GlobalStore.Provider>
}
我想要另一个减速器，对于前 …