Question

我正在尝试使Redux在我的应用程序中正常工作，并且在将状态更改传递给连接的组件时遇到麻烦。 mapStateToProps函数仅在初始化时被调用，而不会再次调用。

我已经阅读了Troubleshooting页并在论坛和github问题上阅读了无数帖子。我已100％确保我不会改变状态。我已经应用了中间件，该中间件在分派操作前后比较状态，以帮助验证至少有一个新引用。

这是确保调度动作会创建新的商店引用的基本中间件

//Store Maker code to apply middleware
const logger = (store) => (next) => (action) => {

    var old_state = store.getState()

    var result = next(action)

    var new_state = store.getState()

    console.log("ENSURE FALSE", new_state === old_state)

    return result
}

export default () => {
    return applyMiddleware(logger)(createStore)(reducers)
}

这是我在哪里创建商店并将其提供给子组件的快照

//Parent Component code
const store = StoreMaker()

const unsubscribe = store.subscribe(() => {
    console.log("State Changed", store.getState())
})

...

class Plugin extends React.Component{

    ...

    render(){
        return (
            <Provider store={store}>
                <ChildComponent {...this.props} />
            </Provider>
        )
    }
}

这是我在尝试使其工作时所用的最基本，毫无意义的减速器

//Reducer code
export default (state={}, action) => {
    if(action.type === "init"){
        return {
            ...state,
            test: 1
        }
    }
    else{
        return {
            ...state,
            test: 2
        }
    }
}

最后，这是子组件

//Child Component code
class ChildComponent extends React.Component{
    constructor(props){
        super(props)
    }

    ...

    render(){
        return (
            this.props.test
        )
    }
}

const mapStateToProps = (state) => {
    console.log("Mapping state to props")
    return state
}

export default connect(mapStateToProps)(ChildComponent)

据我了解，当通过connect进行更改时，react-redux的mapStateToProps函数会订阅商店并更新连接的组件的props。但是，当我的商店中的状态发生更改时，mapStateToProps不会被调用，并且连接的组件的prop也不会更改。但是我在父组件中手动编码以记录状态的订阅确实触发了，这使我困惑为什么未调用mapStateToProps。

我不知道出了什么问题，而且我几乎完全相同地镜像了工作示例。如果能得到帮助，那太好了。

即使只是对如何进行调试的想法也将非常感激。我正在尝试使用Chrome开发者工具在react-redux代码中设置一个断点来订阅状态更改并调用mapStateToProps，但是我在理解源代码中发生的事情时遇到了麻烦。我试图找出我的代码无法将状态更改传达给所连接组件的位置。

Answer 1

我想知道JavaScript原语是否具有问题性的更改检测（这意味着它可能是JavaScript的限制，而不是React / Redux的限制）。您是否可以修改示例，以便它是一个以数字原语作为属性的JavaScript对象，而不是state是数字原语？例如：

将状态从state = 0更改为state = { value: 0 }

让我知道是否可以解决此问题。

Answer 2

如果其他人想知道，上面的代码确实有效。

我正在使用react@16.8.6，redux@4.0.1和react-redux@6.0.0进行尝试。

在不更改任何代码的情况下，我的问题实际上是通过切换为react@16.5.2（保留redux@4.0.1和react-redux@6.0.0）解决的。

不知道为什么要修复它，但是确实可以。如果其他人也遇到类似的问题，只需写这篇文章。

React-Redux：状态更改不会调用mapStateToProps

2 个答案: