title: React router v4, redux and immutable integration
body: <p>I have migrated my code to use React (15.5.4), React Router v4 (4.1.1), Redux (3.6.0), Immutable (3.8.1) and am now having a difficult time understanding this rigmarole.</p>
  
  <p>I used Redux-auth ( <a href="https://github.com/lynndylanhurley/redux-auth" rel="nofollow noreferrer">https://github.com/lynndylanhurley/redux-auth</a> ) as a base for the authentication for my app. It was working fine till I wanted to migrate the react-router library. As far as I understand, auth variable is not getting passed to the component. After reading a couple of blog articles, it seems like withRouter seems the go. I'm not sure how to use it though. Any help would be greatly appreciated.</p>
  
  <p>I am getting this error:
  <a href="https://i.stack.imgur.com/HsxsT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HsxsT.png" alt="enter image description here"></a></p>
  
  <p>I use Lynn's code for OAuthSignInButton except change how it is exported because from my understanding, now connect will not work with the latest migrations:</p>
  
  <pre><code>import { oAuthSignIn as _oAuthSignIn } from '../../actions/users/oauth-sign-in';
  
  // hook for rewire
  var oAuthSignIn = _oAuthSignIn;
  
  class OAuthSignInButton extends React.Component {
    static propTypes = {
      provider: PropTypes.string.isRequired,
      label: PropTypes.string,
      signInParams: PropTypes.object,
      children: PropTypes.node,
      icon: PropTypes.node
    };
  
    static defaultProps = {
      signInParams: {},
      children: &lt;span&gt;OAuth Sign In&lt;/span&gt;,
      icon: &lt;span&gt;&lt;/span&gt;
    };
  
    getEndpoint() {
      return (
        this.props.endpoint ||
        this.props.auth.getIn(['configure', 'currentEndpointKey']) ||
        this.props.auth.getIn(['configure', 'defaultEndpointKey'])
      );
    }
  
    handleClick() {
      this.props.dispatch(oAuthSignIn({
        provider: this.props.provider,
        params: this.props.signInParams,
        endpointKey: this.getEndpoint()
      }))
        .then(this.props.next)
        .catch(() =&gt; {});
    }
  
    render() {
      let disabled = this.props.auth.getIn(['user', 'isSignedIn']);
      let loading = (
        (this.props.auth.getIn(['ui', 'oAuthSignInLoadingProvider']) === this.props.provider) &amp;&amp;
        this.props.auth.getIn(['oAuthSignIn', this.getEndpoint(), 'loading'])
      );
  
      return (
        &lt;ButtonLoader
          loading={loading}
          className={`${this.props.className} oauth-sign-in-submit`}
          disabled={disabled}
          onClick={this.handleClick.bind(this)}
          {...this.props}
        /&gt;
      );
    }
  }
  
  export default OAuthSignInButton;
  </code></pre>
  
  <p>Here is the main container:</p>
  
  <pre><code>class Main extends React.Component {
    static propTypes = {
      dispatch: PropTypes.func,
      pageEndpoint: PropTypes.string,
      theme: PropTypes.string,
      currentUserUid: PropTypes.string,
      currentUserProvider: PropTypes.string,
      currentUserEndpoint: PropTypes.string,
    };
  
    render() {
      return (
          &lt;div&gt;
              &lt;Theme.OAuthSignInButton
                 provider="facebook"
                 endpoint={this.props.pageEndpoint}
                 default
                 bsStyle="default"
                 style={{ padding: 0, borderStyle: 'none' }}
               &gt;
                &lt;img src={require('../assets/btn_facebook1.png')} /&gt;
               &lt;/Theme.OAuthSignInButton&gt;     
          &lt;/div&gt;
      );
    }
  }
  
  export default Main;
  </code></pre>
  
  <p>Redux auth reducer look like this:</p>
  
  <pre><code>import { combineReducers } from 'redux-immutable';
  
  /* reducers */
  export const authStateReducer = combineReducers({
    configure,
    oAuthSignIn,
    ui,
    user
  });
  </code></pre>
  
  <p>Sample of one of my reducers:</p>
  
  <pre><code>const initialState = Immutable.fromJS({
    loading: true,
    errors: null,
    config: null,
    endpointKeys: null,
    defaultEndpointKey: null,
    currentEndpointKey: null
  });
  
  export default function configureReducer(state = initialState, action) {
    switch (action.type) {
      case STORE_CURRENT_ENDPOINT_KEY:
        return ({ currentEndpointKey }) =&gt; state.merge({ currentEndpointKey });
      case SET_ENDPOINT_KEYS:
        return ({ endpointKeys, defaultEndpointKey, currentEndpointKey }) =&gt; state.merge({
          endpointKeys, defaultEndpointKey, currentEndpointKey
        });
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>Main reducer:</p>
  
  <pre><code>import { combineReducers } from 'redux-immutable';
  import { authStateReducer } from './users';
  import { routerReducer } from 'react-router-redux';
  
  
  export default (combineReducers({
    auth: authStateReducer,
    router: routerReducer
  }));
  </code></pre>
  
  <p>Redux store:</p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux';
  import { routerMiddleware } from 'react-router-redux';
  
  import reducer from '../reducers';
  
  const middleware = routerMiddleware(history);
  
  const store = createStore(reducer, applyMiddleware(middleware));
  
  export default store;
  </code></pre>
  
  <p>My client.js file looks like this:</p>
  
  <pre><code>import { AppContainer } from 'react-hot-loader';
  import { Provider } from 'react-redux';
  import { ConnectedRouter } from 'react-router-redux';
  import createHistory from 'history/createBrowserHistory';
  import { Route } from 'react-router';
  
  import Main from './containers/Main';
  import store from './store';
  
  const history = createHistory();
  
  const render = Component =&gt; {
    ReactDOM.render(
      &lt;AppContainer&gt;
        &lt;Provider store={store}&gt;
          &lt;ConnectedRouter history={history}&gt;
            &lt;div&gt;
              &lt;Route exact path="/" component={Component} /&gt;
            &lt;/div&gt;
          &lt;/ConnectedRouter&gt;
        &lt;/Provider&gt;
      &lt;/AppContainer&gt;,
      document.getElementById('content')
    );
  };
  
  render(Main);
  
  if (module.hot) {
    module.hot.accept('./containers/Main', render);
  }
  </code></pre>