Отсутствует контекст при использовании @connect

Question

У меня есть React приложение, которое использует react-redux библиотеки. Он отлично работает, я получаю свой контекст store, я могу отправлять действия. Красивый.

Теперь я столкнулся с проблемой. Я хочу объявить дочерний контекст в корневом компоненте и использовать его для передачи глобальной функции прямо в дочерние элементы.

export default class Root extends React.Component { 
    globalFunc() { 
    } 

    getChildContext() { 
     return { 
      globalFunc: this.globalFunc 
     }; 
    } 

    render() { 
     return (
      { /* ChildComponent somewhere in here */ } 
     ); 
    } 
} 

Root.childContextTypes = { 
    globalFunc: PropTypes.func 
} 

Проблема заключается в одном из детей я получаю пустой объект, когда я @connect декоратора из react-redux. Когда я удаляю декоратор, я правильно понимаю свой контекст. Почему Redux удаляет контекст? Как сделать обходной путь?

@connect(mapStateToProps) 
export default class ChildComponent extends React.Component { 
    constructor(props, context) { 
     super(props, context); 

     console.log(this.context); // EMPTY {} 
    } 

    render() { 
     // ... 
    } 
} 

ChildComponent.contextTypes = { 
    store: PropTypes.store.isRequired, 
    globalFunc: PropTypes.func 
} 

Answer 1

У меня была аналогичная проблема, и когда я использовал «нормальную» форму Hoc для функции connect() вместо одного декоратора, она была фиксации этого вопроса. Обратите внимание, что это не было рекомендовано использовать форму декоратора, как сказал создатель Redux: https://stackoverflow.com/a/35642430/757461

Кроме того, если вы действительно хотите использовать декоратор, я мог бы решить эту проблему, определив свой контекст, используя декоратор. Что-то похожее на это:

export function context(contextTypes, context) { 
    return DecoratedComponent => { 
    return class extends Component { 
     static childContextTypes = contextTypes; 

     getChildContext() { 
     return context(this.props) 
     } 

     render() { 
     return <DecoratedComponent {...this.props} /> 
     } 
    } 
    } 
} 

А потом использовать его как это:

@connect(mapStateToProps, mapDispatchToProps) 
@context(contextTypes, getChildContext)