Redux/React - Why I can't bind state to this.props on component which is in iframe?
<p>I have a specific scenario in my react/redux/express universal project (server-side rendering).</p>

<p>(1)First I defined my routes like so: [ routes.jsx ]</p>

<pre><code>export default (
  &lt;Route component={App} path="/"&gt;
    &lt;Route component={MainView} path="main"&gt;
      &lt;IndexRoute component={ThemeIndex}&gt;&lt;/IndexRoute&gt;
    &lt;/Route&gt;
    &lt;Route component={AnotherView} path="preview" /&gt;
  &lt;/Route&gt;
);
</code></pre>

<p>As you see, when url route is: <strong>localhost:3000/preview</strong>, react-router will use <strong>AnotherView</strong> component.</p>

<p>(2)Now focus on ThemeIndex component: [ ThemeIndex.jsx ]</p>

<pre><code>export default class ThemeIndex extends Component {
  render() {
    return (
      &lt;div&gt;
        &lt;h2&gt;Index&lt;/h2&gt;
        &lt;Frame /&gt;
        &lt;Control /&gt;
      &lt;/div&gt;
    ); 
  }
}
</code></pre>

<p>(3)Frame component like so: [ Frame.jsx ]</p>

<pre><code>class Frame extends Component {
  render() {
    const { text, uid } = this.props.infos;
    const themeUrl = `http://localhost:3000/preview?id=${uid}`;
    //console.log('Frame theme:', text);
    //console.log('Frame uid:', uid);
    return (
      &lt;div className="col-md-8 panel panel-default"&gt;
        &lt;div className="embed-responsive embed-responsive-16by9 panel-body"&gt;
          &lt;iframe src={themeUrl}&gt;&lt;/iframe&gt;
        &lt;/div&gt;
        &lt;div className="details" &gt;
          {text}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
}

export default connect(
  (state) =&gt; {
    return {
      infos: state.infos
    }
  }
)(Frame);
</code></pre>

<p>Here I use iframe tag, its src is <strong><a href="http://localhost:3000/preview?id=xxxx" rel="nofollow noreferrer">http://localhost:3000/preview?id=xxxx</a></strong>, so it means it will link <strong>AnotherView</strong> component to be iframe's page.</p>

<p>(4)AnotherView Component like so:</p>

<pre><code>class AnotherView extends Component {
  render() {
    const { text, uid } = this.props.infos;
    //console.log('AnotherView theme:', text);
    //console.log('AnotherView uid:', uid);
    return (
      &lt;div&gt;
        &lt;div &gt;Another View&lt;/div&gt;
        &lt;div&gt;
          {text}
        &lt;/div&gt;
        &lt;div&gt;{uid}&lt;/div&gt;
      &lt;/div&gt;
    );
  }
}

export default connect(
  (state) =&gt; {
    console.log('another view trigger state:', state);
    return {
      infos: state.infos
    }
  }
)(AnotherView);
</code></pre>

<p>(4)And I have Control component for making dynamic value: [ Component.jsx ]</p>

<pre><code>class Control extends Component {
  render(){
    var uid = () =&gt; Math.random().toString(34).slice(2);

    return (
        &lt;input
          onChange={(event) =&gt; this.props.addTodo({text:event.target.value, uid:uid()})
          /&gt;
    )
  }
}

export default connect(
  (state) =&gt; {
    return {
      infos: state.infos
    }
  }
)(Control);
</code></pre>

<p>(5)List extra files, Action and Reducer:
[ action.js ]</p>

<pre><code>export function addTodo (attrs) {
  return {
    type: 'ADD_TODO',
    attrs
  };
}
</code></pre>

<p>[ reducer.js ]</p>

<pre><code>export default (state = {text:'', uid:''}, action) =&gt; {
  switch(action.type) {
    case 'ADD_TODO':
      return Object.assign({}, state, action.attrs);
    default:
      return state;
  }
}
</code></pre>

<p>Here is Store configuration on server.js:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>app.use( (req, res) =&gt; {
  console.log('server - reducers:', reducers);

  const location = createLocation(req.url);
  const reducer  = combineReducers({infos: infosReducer});
  const store    = applyMiddleware(promiseMiddleware)(createStore)(reducer);

  match({ routes, location }, (err, redirectLocation, renderProps) =&gt; {
    
    .......

    function renderView() {
      const createElement = (Component, props) =&gt; (
        &lt;Component
          {...props}
          radiumConfig={{ userAgent: req.headers['user-agent'] }}
        /&gt;
      );

      const InitialView = (
          &lt;Provider store={store}&gt;
            &lt;RoutingContext
              {...renderProps}
              createElement={createElement} /&gt;
          &lt;/Provider&gt;
      );

      const componentHTML = renderToString(InitialView);

      const initialState = store.getState();

      ......</code></pre>
</div>
</div>
</p>

<p>my application state is like :</p>

<pre><code>{
  infos:{
    text: '',
    uid: ''
  }
}
</code></pre>

<p>(6)Now I key some words on input in Control component. When the input onChange will trigger <strong>addTodo</strong> action function to dispatch action in reducer, finally change the state. In common, the state changing will effect Frame component and AnotherView component, because I used <strong>react-redux</strong> <code>connect</code>, bind the state property to <code>this.props</code> on the component. </p>

<p>But in fact, there is a problem in <strong>AnotherView</strong> component. in <strong>Frame</strong> component, <code>console.log</code> value display the text you key in input correctly. In AnotherView component, even the connect callback will be trigger (<code>console.log</code> will print '<code>another view trigger state: ...</code>') , the <code>console.log</code> in render is <code>undefined</code>, like:</p>

<pre><code>console.log('AnotherView theme:', text); //return AnotherView theme: undefined
console.log('AnotherView uid:', uid); //return AnotherView uid: undefined
</code></pre>

<p>I found the main reason: <strong>AnotherView</strong> component is in <code>iframe</code>. Because if I remove <code>iframe</code>, put AnotherView component directly here, like so:</p>

<pre><code>return (
          &lt;div className="col-md-8 panel panel-default"&gt;
            &lt;div className="embed-responsive embed-responsive-16by9 panel-body"&gt;
              &lt;AnotherView/&gt;
            &lt;/div&gt;
            &lt;div className="details" &gt;
              {text}
            &lt;/div&gt;
          &lt;/div&gt;
);
</code></pre>

<p>then I can bind <code>state</code> properties on <code>this.props</code> in <strong>AnotherView</strong> component successfully, then insert <code>{text}</code> on JSX html, you can see the value changing real time when you key input value on <strong>Control</strong> component. if I use iframe to link <strong>AnotherView</strong> component be its page, you can't see any changing <code>{text}</code> value, because my text default value is empty string value.</p>

<p>How do I bind <code>state</code> properties to <code>this.props</code> in the component which is in <code>iframe</code> when state changing?</p>

<p><strong>Update</strong>
I can't get the latest <code>state</code> in iframe (source is React component), when I changing <code>state</code> in another component, and actually the <code>mapStateToProps</code> was triggered!(means iframe source component) but its state is not the latest in <code>mapStateToProps</code> function. it does not really concerns with the <code>react-redux</code> library?</p>

<p>This is the latest state should be in component:
<a href="https://i.stack.imgur.com/CJtir.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CJtir.png" alt="enter image description here"></a></p>

<p>Below is iframe source component, it can't get the latest state:
<a href="https://i.stack.imgur.com/Mmie8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mmie8.png" alt="enter image description here"></a></p>