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

Question

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

我的问题是组件的道具似乎没有随redux商店更新。在onClick函数运行后，redux存储更新为正确的值，mapStateToProps也会以正确的状态运行，如果我尝试从prop记录状态，则仍然会获得旧值。如果我在返回JSX之前在render函数中执行相同的日志，那么我会从props中获得正确的状态，我无法理解为什么在redux存储被删除后它不会立即更新。因此，如果我将代码修改为以下内容，它将按预期工作：

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

但是我想从render函数中提取buttonextchanger（）函数调用，并在单击时调用它。

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函数以查看传递给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"}

所以道具不会被更新。

Answer 1

所以，你不知道为什么会这样。道具。状态即使在调用调度程序后也不会更新？

你看，Redux完全建立在函数式编程上，现在有了钩子，React也完全走向函数式编程，甚至JavaScript最初也是作为函数式编程构建的。

与OOP完全不同的一件事，也是最酷的一件事是，函数式编程中没有突变。没有。香草Redux完全是FP，只有纯功能——没有副作用的功能。这就是为什么您需要Redux Saga或其他库来进行API调用-非纯函数。

开门见山，

logger = (actualPage) => {
  // here,
  // actualPage => new value
  // this.props.state => old value
  // they will remain as such throughout this function


  console.log("prop state value before dispatch", this.props.state)
  console.log("store value before dispatch", store.getState())
  this.props.onButtonClick(actualPage)

  // even if you update the Redux Store, 
  // `this.props.state` will still have the old value
  // since this value will not be mutated

  console.log("prop state value after dispatch", this.props.state)
  console.log("store value after dispatch", store.getState())
}

那么store.getState（）呢，它们的值更新了，你可能会问。

注意它不是store.getState而是store.getState（）？是的，它是一个函数而不是一个值。无论何时调用它们，它们都会返回最新的值，并且没有任何突变。在您的情况下，您在分派操作后第二次调用，因此您会获得最新的值。这不是突变，store.getState（）只是抓取了最新的值并将其返回给您。

动作调度器将从旧的state创建一个新的state，这就是为什么您可以在Redux DevTools中进行时间旅行。

再次重述

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

  // new value
  this.props.onButtonClick(actualPage)
  // redux would be updated with new values by now

  // but still old value - no mutation
  console.log("prop state value after dispatch", this.props.state)
  // new value
  console.log("store value after dispatch", store.getState())
}