Javascript 我可以在组件中使用redux来避免支柱钻孔吗？

假设我有这个结构

 _______________
| HomeContainer |
 ---------------
        |         _______________   
        |-------- | ComponentX |
                   --------------
                        |       _____________
                        |------ | ComponentZ |
                                --------------   _____________
                                      |---------|  User      |
                                                 -------------

和下面的用户代码

const User=（道具）=>{
返回{props.user.name}
}
常量mapStateToProps=状态=>{
返回{
user:state.auth.user//我在存储中映射了一个auth reducer
}
}
导出默认连接（MapStateTops）（用户）

我是否可以使用

Redux

来避免将用户传递到

ComponentX

和

ComponentZ

，即使

user

只是一个组件而不是容器

---

Redux

提供了什么解决方案来支持钻孔？

确保您只需要使用react Redux的connect函数，它接受两个参数第一个是状态第二个是分派操作，如下面的代码

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { MyAuthActions } from '../some/actions/files' //<--- my action file

const User = ({ user }) => <h1 onClick={myActionFunction}>{user.name}</h1> //<---- myActionFunction was created in my action created file dispatch

const state = ({ auth }) => ({ user: auth.user })
const dispatch = dispatch => bindActionCreators(MyAuthActions, dispatch)

export default connect(state, dispatch)(User)

从'react redux'导入{connect}
从“redux”导入{bindActionCreators}
从“../some/actions/files”/{user.name}//（{user:auth.user}）导入{MyAuthActions}
const dispatch=dispatch=>bindActionCreators（MyAuthActions，dispatch）
导出默认连接（状态、调度）（用户）

是，您可以使用Redux来避免钻柱。您还可以使用React上下文API，这可能更简单solution@Jayce444可以将redux与上下文api混合使用吗。难道他们没有相似的目的吗？也许值得退一步，想想你想用Redux实现什么。您是否希望在应用程序的不同视图中保留该部分状态？丹·阿布拉莫夫的这篇文章与你的担忧有关。另一个选项是作为React钩子的

useReducer（）

。@它们之间肯定有很多重叠。就你应该选择哪一个而言，这是一个很复杂的问题。最好对每一项都做一系列的研究，并在我极力推荐的两项之间进行比较。这是一个非常新的版本，也是由facebook工程师开发的，并且跳过了很多上下文或Redux的样板文件。从评论中可以看出：对于堆栈溢出，不鼓励只使用代码的答案，因为它们没有解释它是如何解决问题的。请编辑您的答案，以解释此代码的作用以及它如何回答问题，以便对OP以及具有类似问题的其他用户有用。请参阅：。谢谢