Question

这是this问题的标签。与那个问题相反，我不需要我的表现部分成为一个班级。有没有办法在不使用类和相应的super（）方法的情况下检索Redux的存储？

container.js

if (isset($_POST['update'],$_POST['id'])){
            $id=$_POST['id'];
            echo $id ;  
        }

presentational.js

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

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

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

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

Answer 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()

Answer 2

修改

我之前的回答是错误的道歉，实际上功能组件（没有类的组件）也可以访问redux状态，他们可以使用来自react-redux的连接以类似组件的方式来实现做

之前错误答案的原因

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

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

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

如果您希望在您的演示组件中存储在redux中的任何数据，您必须通过容器组件传递它，该容器组件可以访问redux存储。请在此处详细了解https://redux.js.org/recipes/writing-tests#components。

Answer 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组件。

在演示组件中获取Redux存储

3 个答案: