Как перенести приложение вact-redux v6 и v7 с помощью контекстного API

Question

Начиная с версии 6, с React 16.3, реакция-добавка добавляет поддержку 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

Передача контекста явным образом в Redux Provider и connect необходима только в том случае, если необходимо использовать несколько вложенных хранилищ, как описано в этого ответа .Это замена устаревшей опции store в connect.

Если существует несколько компонентов, которые должны быть связаны с одним и тем же пользовательским контекстом, может быть создан вспомогательный HOC:

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

Если есть единственное хранилище или они не пересекаются, пользовательский контекст может быть опущен, вместо него будет использоваться контекст Redux по умолчанию .