如何结合React Context值使用mapStateToProps从Redux state中获取对应数据

可行的实现方案有两种，分别对应不同的使用场景： #

方案1：调整高阶组件嵌套顺序（兼容旧版代码/class组件）

你之前的实现逻辑错误是因为组件执行顺序问题：connect生成的高阶组件会先执行mapStateToProps，再渲染内部的Context.Consumer，此时id属性还未被注入。
只需要把Context.Consumer提到connect高阶组件的外层，先拿到选中项ID再传给connect包裹的组件即可，示例代码如下：

// 原始业务组件
function Component(props) {
  // 直接使用props.item即可
}

// 定义mapStateToProps
function mapStateToProps(state, props) {
  return {
    item: state.items[props.id]
  }
}

// 生成connect包裹后的高阶组件
const ConnectedComponent = connect(mapStateToProps)(Component)

// 外层包裹Context获取逻辑，拿到ID后传入已连接的组件
export default function WrappedComponent(props) {
  return (
    <MySelectedItemContext.Consumer>
      {selectedItemId => <ConnectedComponent {...props} id={selectedItemId} />}
    </MySelectedItemContext.Consumer>
  )
}

方案2：使用React-Redux Hooks实现（符合hooks使用逻辑，代码更简洁）

如果你使用的是React-Redux v7.1及以上版本，直接用useSelector + useContext的组合即可实现你最开始预期的逻辑，不需要处理高阶组件的嵌套顺序问题：

import { useSelector } from 'react-redux'
import { useContext } from 'react'

function Component(props) {
  // 直接在组件内部按hooks规则调用
  const selectedItemId = useContext(MySelectedItemContext)
  const item = useSelector(state => state.items[selectedItemId])
  
  // 后续业务逻辑直接使用item即可
}

export default Component

该方案性能和connect完全一致，当Context值或者store数据变化时都会自动更新对应的值，符合React hooks的调用规范。

内容的提问来源于stack exchange，提问作者alessandro308