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

我的问题是组件的props似乎没有通过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函数中提取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，以查看传递给道具的状态。这样产生：

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

因此，即使致电调度员后，您也无法解决this.props.state为什么不更新的问题？

你看， 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()只是获取了其中的最新值并将其返回给您。第一次调用结束后，logger()将获得新值，然后该循环再次重复。

动作分派器将从旧的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())
}

React组件道具无法通过Redux Store更新

1 个答案: