与ReduxReact?“上下文”问题怎么办?

lb3vh1jj  于 2022-11-30  发布在  React
关注(0)|答案(4)|浏览(234)

我通常在Stack上发布代码相关的东西,但这更多的是一个关于社区的一般想法的问题。
似乎有很多人提倡使用Redux和React来管理数据/状态,但是在阅读和学习这两本书的过程中,我遇到了一些看起来不太正确的东西。

还原

在本页底部:http://redux.js.org/docs/basics/UsageWithReact.html(传递存储)它建议使用React“上下文”的“魔力”。
一种选择是将它作为一个道具传递给每个容器组件。然而,这会变得很乏味,因为即使是通过表示性组件,你也必须连接存储,仅仅因为它们碰巧在组件树的深处呈现容器。
我们推荐的方法是使用一个名为ReactRedux的特殊组件,神奇地使商店对所有容器组件都可用...

React

在“React Context(React上下文)”页(https://facebook.github.io/react/docs/context.html)的顶部有一条警告:
上下文是一个高级的实验性功能。API可能会在将来的版本中更改。
然后在底部:
正如在编写清晰的代码时最好避免使用全局变量一样,在大多数情况下,您应该避免使用上下文...
不要使用上下文来通过组件传递模型数据。显式地将数据通过树进行线程化要容易理解得多...
所以...
Redux建议使用React的“Context”特性,而不是通过“props”将store沿着传递到每个组件。而React建议相反。
还有,看起来丹·阿布拉莫夫(Redux的创造者)现在为Facebook(React的创造者)工作,只是为了让我更困惑。

  • 我没阅读吧
  • 目前在这个问题上的普遍共识是什么?
ycl3bljg

ycl3bljg1#

上下文是一个高级特性,并且随时可能改变。在某些情况下,它的便利性超过了它的缺点,因此一些库,如React Redux和React Router,尽管它是实验性质的,但还是选择依赖它。
这里最重要的部分是 * 库 * 这个词。如果上下文改变了它的行为,* 我们作为库的作者将需要调整 *。但是,只要库不要求您直接使用上下文API,作为用户的您就不必担心它的变化。
React Redux在内部使用上下文,但它不会在公共API中公开这一事实。因此,通过React Redux使用上下文比直接使用上下文要安全得多,因为如果上下文发生变化,更新代码的负担将由React Redux承担,而不是您。
最终,React Redux仍然支持总是将store作为一个道具传递,所以如果你想完全避免上下文,你可以选择。

TLDR:避免直接使用上下文,除非你真的知道你在做什么。使用一个碰巧在内部依赖上下文的库相对安全。

yhxst69z

yhxst69z2#

我不知道其他人怎么想,但我更喜欢使用react-redux的connect decorator来 Package 我的组件,这样只有我需要的商店中的道具才能传递到我的组件中。这在某种意义上证明了上下文的使用是合理的,因为 * 我 * 不会使用它(我知道,作为一个规则,我负责的任何代码都不会使用它)。
当我测试我的组件时,我测试未 Package 的组件。因为react-redux只传递了我在该组件上需要的属性,所以我现在确切地知道我在编写测试时需要什么属性。
我想问题的关键是,我从来没有在我的代码中看到上下文这个词,我不使用它,所以在某种程度上,它不会影响我!这并没有说任何关于Facebook的“实验性”警告..如果上下文消失了,我会和其他人一样完蛋,直到Redux更新。

d8tt03nd

d8tt03nd3#

有一个npm模块,可以非常容易地将redux添加到react上下文中
https://github.com/jamrizzi/redux-context-provider
https://www.npmjs.com/package/redux-context-provider

import React, { Component } from 'react';
import ReduxContextProvider from 'redux-context-provider';
import createStore from './createStore';
import actions from './actions';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <ReduxContextProvider store={store} actions={actions}>
        <Routes />
      </ReduxContextProvider>
    );
  }
}
u4dcyp6a

u4dcyp6a4#

React提供了处理状态所需的所有特性,而不需要额外的库。大多数应用程序的状态不应该是全局的,因为它们可以很好地驻留在useStateuseReducer或组件旁边的自定义钩子中。
因此,在深入研究高级状态管理(例如Redux)之前,请考虑使用React附带的开箱即用工具。
如果您有兴趣了解更多这方面的内容,我推荐Andy费尔南德斯的这篇文章,它深入探讨了Redux的细节:Context API vs Redux

相关问题