时间戳

首页 > 解决方案 > React-Redux：状态变化不要调用 mapStateToProps

reactjs - React-Redux：状态变化不要调用 mapStateToProps

问题描述

我正在尝试让 redux 在我的应用程序中工作，并且在将状态更改传递给连接的组件时遇到了问题。该mapStateToProps函数仅在初始化时被调用，不再被调用。

我已经阅读了故障排除页面以及论坛和 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)

据我了解，connectreact-redux 的函数订阅 store 并在通过mapStateToProps. 但是，当我的商店中的状态发生变化时，mapStateToProps不会调用它，并且连接组件的道具不会改变。但是我在父组件中手动编码只是为了记录状态的订阅确实触发了，这让我对为什么没有调用 mapStateToProps 感到困惑。

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

即使只是关于如何进行调试的想法也会非常感激。我正在尝试使用 Chrome 开发工具在订阅状态更改和调用的 react-redux 代码中设置断点mapStateToProps，但我无法理解源代码中发生了什么。我试图查明我的代码无法将状态更改传达给我连接的组件的位置。

标签： reactjsreduxreact-redux

解决方案

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

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

让我知道是否可以解决它。

推荐阅读