Redux mapStateToProps不起作用

Question

我正在尝试将Redux容器连接到组件。我刚开始用redux，我觉得我可能错过了一些概念性的东西，但我不知道是什么。

问题是，当mapStateToProps位于与组件不同的文件中时，它甚至不会运行。

我的代码：index.js:

import React from "react"
import ReactDom from "react-dom"
import App from "./components/App"
import {Provider} from "react-redux"
import { combinedReducers} from "./reducers/changePageReducer"
import { createStore } from "redux"

ReactDom.render(
<Provider store = {createStore(combinedReducers)}>
<App/>
</Provider>, 
document.querySelector("#root"))

App.js组件

import React from "react";
class App extends React.Component {
logger = () => {
console.log(this.props);
}
render() {
return (
<div>
<button onClick = {this.logger}>Click me</button>
</div>
)
}
}
export default App

集装箱

import { connect } from "react-redux"
import App from "../components/App"
const mapStateToProps = (state) => {
console.log(state)
return {buttonText : state.page}
} 
const changePageContainer = connect(mapStateToProps)(App)
export default changePageContainer

我还定义了一个简单的减速器和动作。对我来说，有趣的是，如果我在一个文件(容器和组件(中运行代码，我可以很好地注销props中的状态，但如果我以这种方式将它们分离，我只会为props记录一个空对象。我认为我应该以某种方式将组件连接到容器，但我在任何地方都找不到如何做到这一点。

Answer 1

从您提供的示例来看，您似乎根本没有导入容器。

请尝试在index.js中导入ChangePageContainer，并使用它而不是App。

import React from "react"
import ReactDom from "react-dom"
// import App from "./components/App"
import ChangePageContainer from './containers/changePageContainer';
import {Provider} from "react-redux"
import { combinedReducers} from "./reducers/changePageReducer"
import { createStore } from "redux"
ReactDom.render(
<Provider store = {createStore(combinedReducers)}>
// <App/>
<ChangePageContainer />
</Provider>, 
document.querySelector("#root"))