React 组件道具不会使用 redux 商店更新

Button.js 组件

    import React from "react"
import "../styles/button.scss"
import store from "../index"

class Button extends React.Component {
    constructor(props) {
        super(props)
        this.buttonTextChanger()
    }

    buttonTextChanger() {
        this.buttonText = "MainPage" === this.props.state.page ? "Az adatokhoz" : "A főoldalra"
    }


    logger = (actualPage) => {
        this.props.onButtonClick(actualPage)
        console.log("state from store before textchange", store.getState())
        console.log("state from props before textchange", this.props.state)
        this.buttonTextChanger()
    }

    render() {
        return (
            <div id="container">
                <button className="learn-more" onClick = {() => this.logger(this.props.state.page)}>
                    <span className="circle" aria-hidden="true">
                    <span className="icon arrow"></span>
                    </span>
                    <span className="button-text">{this.buttonText}</span>
                </button>
            </div>
        )
    }
}

export default Button

我的问题是组件的 props 似乎没有用 redux store 更新。在 onClick 函数运行后，redux 存储更新为正确的值，mapStateToProps 也以正确的状态运行，并且在这些之后，如果我尝试从 prop 记录状态，我会得到旧值。如果我在返回 JSX 之前在渲染函数中执行相同的日志，我会从 props 获得正确的状态，并且我无法理解为什么在 redux store 之后它没有立即更新。因此，如果我将代码修改为以下内容，它会按预期工作：

logger = (actualPage) => {
        this.props.onButtonClick(actualPage)
        console.log("state from store before textchange", store.getState())

    }

    render() { 
        console.log("state from props before textchange", this.props.state)
        this.buttonTextChanger()  
        return (
            <div id="container">
                <button className="learn-more" onClick = {() => this.logger(this.props.state.page)}>
                    <span className="circle" aria-hidden="true">
                    <span className="icon arrow"></span>
                    </span>
                    <span className="button-text">{this.buttonText}</span>
                </button>
            </div>
        )
    }
}

减速机功能

import { combineReducers } from "redux"

export const changePageReducer = (state = {page : "MainPage"}, action) => {
    if (action.type === "CHANGE_PAGE")
        if (action.payload !== state.page) {
            return action.payload
        }

    return state.page
}

export const combinedReducers = combineReducers({page : changePageReducer})

按钮容器

import { connect } from "react-redux"
import Button from "../components/Button"
import changePage from "../actions/changePage"

const mapStateToProps = (state) => {
    console.log("az injectelt state", state)
    return {state}
} 

const mapDispatchToProps = (dispatch) => {
    return {
        onButtonClick : (page) => {
            switch (page) {
                case "MainPage":
                    dispatch(changePage("DataPage"))
                    break
                case "DataPage":
                    dispatch(changePage("MainPage"))
                    break
                default:
                    dispatch(changePage("MainPage"))
            }
        }
    }
}

const ChangePageContainer = connect(mapStateToProps, mapDispatchToProps)(Button)

export default ChangePageContainer

但我想从渲染函数中提取 buttonTextChanger() 函数调用并在单击时调用它。

TLDR：问题：

logger = (actualPage) => {
  console.log("prop state value before dispatch", this.props.state)
  console.log("store value before dispatch", store.getState())
  this.props.onButtonClick(actualPage)
  console.log("prop state value after dispatch", this.props.state)
  console.log("store value after dispatch", store.getState())
}

mapStateToProps 函数中还有一个 console.log 来查看传递给 props 的状态。这产生：

prop state value before dispatch {page: "MainPage"}
store value before dispatch {page: "MainPage"}
state when mapStateToProps function called {page: "DataPage"}
store value after dispatch {page: "DataPage"}
prop state value after dispatch {page: "MainPage"}

所以道具不会更新。