asynchronous context change is not propagated to connected components

[zdila]

Please see the following example. The only difference between Bar and ConnectedBaz is that the second one uses redux connect.

The problem is that the context changes do not get propagated to the component Baz and it statically renders 0. Cmponent Bar is being updated and re-rendered correctly every second.

import React, {PropTypes} from 'react';
import { connect } from 'react-redux';

class Bar extends React.Component {
  static contextTypes = {
    time: React.PropTypes.number
  };

  render() {
    return <div>{this.context.time}</div>;
  }
}

class Baz extends React.Component {
  static contextTypes = {
    time: React.PropTypes.number
  };

  render() {
    return <div>{this.context.time}</div>;
  }
}

const ConnectedBaz = connect()(Baz);

export default class Foo extends React.Component {
  static childContextTypes = {
    time: React.PropTypes.number
  };

  getChildContext() {
    return {
      time: this.state ? this.state.time : 0
    };
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({time: new Date().getTime()});
    }, 1000);
  }

  render() {
    return <div><Bar/><ConnectedBaz/></div>;
  }
}

[zdila]

moved to reduxjs/react-redux#311