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函数中提取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"}

所以道具不会更新。

Answer 1

因此，您无法理解为什么this.props.state即使在调用调度程序后也没有更新？

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

与OOP完全不同的一点也是最酷的一点是，函数式编程中没有突变没有。Vanilla Redux是完全FP，只有纯粹的功能-没有副作用的功能。这就是为什么您需要ReduxSaga或其他库来进行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())
}