Cha*_*ett 8 javascript reactjs react-router redux react-redux
编辑:我能够根据Redux故障排除设置中的上下文更改连接子更新{ pure: false }但是我需要将此添加到我想要更新的Child的父项的所有连接组件中.对于许多组件来说,这似乎很奇怪且效率低下.
首先,在深入研究我认为的问题之前,我将描述我期望的最终结果.
我想从我的Route组件的孙子组件中访问react路由器的参数.有几个参考文献表示,如果您没有使用"记录,持久化和重放用户操作,使用时间旅行",则无需将当前路由与商店同步,因此到目前为止我已经避免使用它.丹阿布拉莫夫在这里说,可以让他们不同步,只使用这条路线作为真相的来源.
类似的问题没有我的问题的答案:
https:
//stackoverflow.com/a/36633892/2300773通过上下文传递存储与<Provider>无法在基于connect()的方案中工作
由于react-router不提供当前参数作为上下文,我选择将当前参数添加为Route组件的上下文.我可以在组件树中一直访问上下文,直到我到达使用connect()设置的Child .页面的初始呈现为Child提供了正确的上下文.但是,当上下文更改时,Child不会更新.connect()似乎正在剥离上下文链接.
这是connect()的理想行为吗?如果是这样,组件如何在没有它们同步到商店的情况下访问路径参数?
这是一个JSFiddle,显示了一个非常小的场景,其中上下文没有通过"连接"组件更新.
这是我的一些实际代码,我将当前路由参数作为来自Router组件(/view/:viewSlug)的上下文发送.我已经尝试过的组件设置为{ pure: false }在连接中所描述的终极版故障,但没有运气.
class App extends Component {
getChildContext() {
const { viewSlug } = this.props
return { viewSlug }
}
...
}
App.PropTypes = {
...
}
App.childContextTypes = {
viewSlug: PropTypes.string
}
...
export default connect(mapStateToProps)(App)
Run Code Online (Sandbox Code Playgroud)
import Day from '../components/Day'
const mapStateToProps = (state, ownProps) => {
...
}
export default connect(mapStateToProps)(Day)
Run Code Online (Sandbox Code Playgroud)
class Day extends Component {
...
}
Day.PropTypes = {
...
}
Day.contextTypes = {
viewSlug: PropTypes.string.isRequired
}
export default Day
Run Code Online (Sandbox Code Playgroud)
在与丹·阿布拉莫夫(Dan Abramov)进行快速讨论之后,似乎没有一种好方法可以将参数传递给各种深层组件.(在这里讨论).一旦React Router 3.0发布,这将是非常简单的正确实现.
目前我发现的唯一解决方法是将子组件以及子组件和路径组件之间的任何祖先组件设置为"非纯"组件.
使用connect()函数时,可以使用options参数完成此操作.
export default connect(mapStateToProps, null, null, { pure: false })(MyComponent)
Run Code Online (Sandbox Code Playgroud)
此信息可在Redux故障排除页面上找到
| 归档时间: |
|
| 查看次数: |
3412 次 |
| 最近记录: |