在表示组件中获取 Redux 存储

Question

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

容器.js

function mapStateToProps(state) {
return {
a: state.a
};
}
function mapDispatchToProps(dispatch) {
return {
setA: a => dispatch(setA(a)),
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(container);

表现型.js

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

派单的工作方式是否相同？

Answer 1

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

import { configureStore } from '...';
export const store = configureStore(...);

在演示文稿.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 测试了我的案例(请注意容器文件夹中的示例组件(

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

不，从"react-redux"模块连接仅适用于类组件。此外，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组件。