如何使用上下文API將應用程序遷移到react-redux v6和v7

Question

從版本6開始，使用React 16.3，react-redux添加了對Context API的支持。

// You can pass the context as an option to connect
export default connect(
  mapState,
  mapDispatch,
  null,
  { context: MyContext }
)(MyComponent)

// or, call connect as normal to start
const ConnectedComponent = connect(
  mapState,
  mapDispatch
)(MyComponent)

// Later, pass the custom context as a prop to the connected component
;<ConnectedComponent context={MyContext} />

我正在遷移我的應用程序，但是有太多地方需要添加MyContext ，我們是否有一些方法可以僅在一個地方為每個ConnectedComponent安全地添加它？

Answer 1

僅在必須使用多個嵌套存儲的情況下才需要connect上下文顯式傳遞給Redux Provider並進行connect ， 如此答案中所述 。 這是connect不推薦使用的store選項的替代品。

如果需要使用相同的自定義上下文連接多個組件，則可以創建助手HOC：

const myConnect = (mapStateToProps = null, mapDispatchToProps = null, mergeProps = null, options = {}) => (
  connect(mapStateToProps, mapDispatchToProps, mergeProps, {...options, context: MyContext })
);

如果只有商店或它們不相交，則可以省略自定義上下文，而是使用默認的Redux上下文 。