上下文 + Hooks 或 Redux

Posted 2023-02-22

【中文标题】上下文 + Hooks 或 Redux

【英文标题】：Context + Hooks or Redux

【发布时间】：2020-01-25 07:45:51

【问题描述】：

实际上我正在建立一个新项目，对选择流程感到困惑：

useState + useReducer + useContext

或

Redux

项目属于中高级项目，近期可能会导致大型应用，也可能不会。

如果我选择选项 1（useState + useReducer + useContext）：

一个。还没有用于 useReducer 的中间件。由于它不是一个全局状态容器，因此很难在全局范围内应用这种中间件。 湾。 （目前）还没有将所有减速器组合成一个终极减速器的原生特性。

如果我选择选项 2，我可以使用选项 1 无法提供的功能。

我遇到了，我们可以实现我们可以在选项 1 中手动组合多个减速器：

import userReducer from './reducers/user';
import basketReducer from './reducers/basket';
const mainReducer = ( user, basket , action) => (
     user: userReducer(user, action),
     basket: basketReducer(basket, action)
);

也可以实现中间件

import userReducer from './reducers/user';
import basketReducer from './reducers/basket';
const mainReducer = ( user, basket , action) => 
  // middleware goes here, i.e calling analytics service, etc.
  return 
    user: userReducer(user, action),
    basket: basketReducer(basket, action)
  ;
);

实际上，我在这里冻结选择哪种方式是最佳选择？

如果我要使用 Redux，我必须实现 Redux、axios、saga、不可变 js 或其他第三方库。 我将使用 Redux 的强大功能，并且我应该首先学习 Redux 的所有概念。因为我知道 Context + hooks。

react 官方是否有计划将那些遗漏的成分从 Redux 带到 hooks + context 中？

【问题讨论】：

通常这取决于许多因素）

【参考方案1】：

实际上，我在这里犹豫选择哪种方式最适合？

最好，我会说它们都是一样的。它们都支持记忆。但是，Redux 的优势在于它为您的整个应用程序状态提供了一个 single source of truth。

react 官方是否有计划将那些遗漏的成分从 Redux 带到 hooks + context 中？

Redux、Hooks、Context、Saga 有不同的目的/动机。

最后，我建议你使用钩子+函数组件，原因如下：

由于上下文提供者而消除 wrapper hell。

通过功能组件中的 useEffect 精细处理副作用（获取、订阅）。

【参考方案2】：

react 官方是否有任何计划将那些遗漏的成分从 Redux 带到 hooks + context 中？

不，它与它的设计原则相矛盾，你可以自己实现这些功能（不是很复杂），react 的生态系统中有很多稳定和伟大的状态管理器（比如redux 和mobx)。

React's roadmap Big Picture Design Principles。

通用抽象（设计原则）：一般来说，我们拒绝添加可以在用户空间中实现的功能。我们不想用无用的库代码使您的应用程序膨胀。但是，也有例外。

---

实际上，我在这里犹豫选择哪种方式是最佳选择？

这个问题太宽泛了，它取决于您的应用程序逻辑、它的扩展性以及您是否真的需要所有redux 功能。

参考SO问题React Context vs React Redux, when should I use each one?

---

如果我使用 Redux，我必须实现 Redux、axios、saga、不可变 js 或其他第三方库。

使用axios (fetch) 和immutable (freeze) 不绑定redux，也推荐to not mutate data 并在你的应用程序中使用不可变库。

此外，您不必将saga与redux集成，如上所述，熟悉中间件后，根据您的应用程序逻辑，您可能不需要saga完全没有。