Redux mapStateToProps не работает

Question

Я пытаюсь подключить контейнер Redux к компоненту. Я только начинаю с redux, и мне кажется, что я могу упустить что-то концептуальное, но я не могу понять, что.

Проблема в том, что mapStateToProps даже не запускается, когда он находится в другом файле. чем компонент.

Мой код: индекс. 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"))

Приложение. 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

У меня также есть один простой редуктор и определенное действие. Для меня интересно то, что если я запускаю код в одном файле (контейнере и компонентах), я могу просто вывести состояние из реквизита, но если я разделяю их таким образом, я регистрирую только пустой объект для реквизита. Я полагаю, что должен каким-то образом подключить компонент к контейнеру, но я нигде не нашел, как это сделать.

Answer 1

Из приведенных примеров видно, что вы вообще не импортировали свой контейнер.

Пожалуйста, попробуйте импортировать ChangePageContainer в index.js и использовать его вместо 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"))