在展示组件中获取 Redux Store答案

【问题标题】：Get Redux Store In Presentational Component在展示组件中获取 Redux Store
【发布时间】：2018-06-11 10:51:52
【问题描述】：

这是this 的问题。与那个问题相反，我不需要我的演示组件成为一个类。有没有办法在不使用类和相应的 super() 方法的情况下检索 Redux 的 store？

container.js

function mapStateToProps(state) {
  return {
    a: state.a
  };
}

function mapDispatchToProps(dispatch) {
  return {
    setA: a => dispatch(setA(a)),
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(container);

presentational.js

function b({ a }) {
  return {
    console.log(a) // returns undefined
  }
}

调度的工作方式是否相同？

【问题讨论】：

标签： reactjs redux

【解决方案1】：

是的，您可以从任何您喜欢的地方访问该商店。您只需从创建它的文件中导出它。

import { configureStore } from '...';

export const store = configureStore(...);

在您的presentational.js 文件中导入商店

import {store} from '...'

//  And now you can access the current state or perform a dispatch: 

store.getState() // current state

store.dispatch()

【讨论】：

这并没有错，如果你使用的是 react-redux 连接的组件，你实际上是在做同样的事情。您获取状态并对该状态执行调度操作。它只是引用状态，而不是改变它。

【解决方案2】：

编辑

我之前的回答是错误的，为此道歉，实际上功能组件（没有类的组件）也可以访问 redux 状态，他们可以使用 react-redux 中的 connect 来做到这一点，就像类组件一样做

上一个错误答案的原因

我很久以前曾尝试将connect 与功能组件一起使用，但由于一些奇怪的原因它没有工作，但是当我将功能组件转换为类组件时，它可以在没有更改任何其他逻辑的情况下工作，所以我得出结论只有类组件可以访问 redux 状态。但是当我在这个沙箱链接https://codesandbox.io/s/38yw3l6nom 中测试我的案例时我错了（请注意容器文件夹中的示例组件）

以前的错误答案（如果您只是在寻找正确的解决方案，请不要阅读）

不，从“react-redux”模块连接仅适用于类组件。此外，super 是在构造函数中调用的方法，因此它们只能在类中调用。您可以在此处引用此链接https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes。

如果你想在你的展示组件中存储在 redux 中的任何数据，你必须通过一个容器组件来传递它，该容器组件可以访问 redux 存储。请在此处阅读更多信息https://redux.js.org/recipes/writing-tests#components。

【讨论】：

有趣.. 所以如果我希望商店可以从任意的展示组件访问，那么我需要使用类吗？我理解正确吗？
是类，您还需要使用来自react-redux的连接使其成为容器或连接组件
我需要使用连接来制作演示组件吗？我认为这违背了表示组件的整个原则（即一个只呈现而不处理状态的组件）
所以这是对您的问题的直接回答，展示组件无法直接访问 redux-state，这就是为什么它们是展示的，它们只是根据 props 提供的信息进行渲染
我也可以在功能组件上使用connect from react-redux。

【解决方案3】：

如果您想在演示组件上使用connect，则必须使用composition。 recompose 实现这一目标。

import {compose} from 'recompose';

const presentationalComponent = props => {
    return (
        <div>{//Your content here}</div>
    );
}

function mapStateToProps(state) {
  return {
    a: state.a
  };
}

function mapDispatchToProps(dispatch) {
  return {
    setA: a => dispatch(setA(a)),
  };
}

export default compose(
   connect(
      mapStateToProps,
      mapDispatchToProps
   )
)(presentationalComponent);

您不必以这种方式制作container 组件。

【讨论】：