问题:上下文没有通过redux connect()

编辑: 我能够通过设置{ pure: false }的 Redux 故障排除中的建议在上下文更改时更新连接的子项,但是我需要将此添加到所有连接的组件中,这些组件是我想成为的子项的父母更新。必须对很多组件执行此操作似乎很奇怪且效率低下。

首先,在深入探讨我认为的问题之前,我将描述我想要的最终结果。

我想从我的Route组件的孙子组件中访问反应路由器的参数。有几个参考资料说,如果您不使用[“使用时间旅行记录、持久化和重放用户操作”,则无需将当前路线与商店同步。 Dan Abramov 在这里声明可以保持它们不同步并仅使用路由作为事实来源。

对我的问题没有答案的类似问题:https://stackoverflow.com/a/36633892/2300773

使用 <Provider> 通过上下文传递存储在基于 connect() 的场景中不起作用

由于 react-router 不提供当前参数作为上下文,我选择将当前参数添加为来自 Route 组件 的上下文。我可以一直访问组件树下的上下文,直到到达使用 connect() 设置的 Child。页面的初始呈现为 Child 提供了正确的上下文。但是,当上下文发生变化时,Child 不会更新。 connect() 似乎正在剥离上下文链接。

这是 connect() 的期望行为吗?如果是这样,组件应该如何访问路由参数而不将它们同步到商店?

这里是一个 JSFiddle,它显示了一个非常小的场景,其中上下文不会在“已连接”组件之后更新。

这是我的一些实际代码,我将当前路由参数作为上下文从 Router 组件 (/view/:viewSlug) 发送。我已经**尝试在 connect 中将组件设置为{ pure: false },如redux 故障排除中所述,但没有运气。

父(App)组件

class App extends Component {
  getChildContext() {
    const { viewSlug } = this.props

    return { viewSlug }
  }

  ...
}

App.PropTypes = {
  ...
}

App.childContextTypes = {
  viewSlug: PropTypes.string
}

...

export default connect(mapStateToProps)(App)

孙子(日)货柜

import Day from '../components/Day'

const mapStateToProps = (state, ownProps) => {
  ...
}

export default connect(mapStateToProps)(Day)

孙子(天)组件

class Day extends Component {
  ...
}

Day.PropTypes = {
  ...
}

Day.contextTypes = {
  viewSlug: PropTypes.string.isRequired
}

export default Day

解答

在与 Dan Abramov 快速讨论之后,似乎没有一种将参数传递给各种深层组件的_好_方法。 (这里讨论)。一旦 React Router 3.0 发布,正确实现这将非常简单。

解决方法

目前我发现的唯一解决方法是将子组件以及子组件和路由组件之间的任何祖先组件设置为“非纯”组件。

这可以在使用 connect() 函数时通过 options 参数来完成。

export default connect(mapStateToProps, null, null, { pure: false })(MyComponent)

此信息位于Redux 故障排除页面