title: set initial state with react-redux outside of the reducer
body: <p>I'm trying to get my initial state into a component but I can't seem to get there. I'm setting my initial state to have a prop called <code>topic_drpDwn</code>, but in the <code>MonitoringPage</code> components, I don't see that show up in the state. </p>
  
  <p>my index.js looks like this:</p>
  
  <pre><code>import 'babel-polyfill';
  import React from 'react';
  import { render } from 'react-dom';
  import { Router, browserHistory } from 'react-router';
  import routes from './routes';
  import {Provider} from 'react-redux';
  import './styles/styles.css'; //Webpack can import CSS files
  import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
  import configureStore from './store/configureStore';
  import * as ReactBootstrap from 'react-bootstrap';
  
  let initialState     = {
      topic_drpDwn: ["nifi", "drop 2", "tsys"]
  };
  
  const store = configureStore(initialState);
  
  
  render (
      &lt;Provider store={store}&gt;
          &lt;Router history={browserHistory} routes={routes} /&gt;
      &lt;/Provider&gt;,
      document.getElementById('app')
  );
  </code></pre>
  
  <p>my MonitoringPage.js looks like this (this is where I'm expecting <code>this.props.topic_drpDwn</code>)</p>
  
  <pre><code>import React, {PropTypes} from 'react';
  import {connect} from 'react-redux';
  import * as monitoringActions from '../../actions/monitoringActions';
  import * as ReactBootstrap from 'react-bootstrap';
  
  class MonitoringPage extends React.Component {
  
      constructor (props, context) {
          super(props, context);
  
          this.state = {
              drplist: {drpTitle: "Sample topic selector", 
                        drpVal: ["tysys", "kafka-jmx", "nifi"]
                       }
          };
  
          this.onDropChange = this.onDropChange.bind(this);
      }
  
      onDropChange (event) {
  
          let drplist = Object.assign({}, this.state.drplist);
  
          console.log("drop changed")
  
          drplist.drpTitle = event;
  
          this.setState({drplist: drplist});
      }
  
      mkList (x) {
  
          return &lt;ReactBootstrap.MenuItem eventKey={x}&gt;{x}&lt;/ReactBootstrap.MenuItem&gt;
  
      }
  
      render (title) {
  
          let data = [1,2,3,4]
  
          console.log("data", title)
  
  
          console.log("state: ", this.state)
  
          return (
              &lt;div&gt;
                  &lt;h1&gt;Monitoring&lt;/h1&gt;
                  &lt;h2&gt;Monitoring Page under dev, example save button&lt;/h2&gt;
                  &lt;input
                      type="text"
  
                       /&gt;
                  &lt;input
                      type="submit"
                      value="save" /&gt;
                  &lt;ReactBootstrap.DropdownButton title={this.state.drplist.drpTitle} id="bg-vertical-1" onSelect={this.onDropChange}&gt;
                      {this.state.drplist.drpVal.map(this.mkList)}
                  &lt;/ReactBootstrap.DropdownButton&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state, ownProps) {
      console.log("initial state indx: ", JSON.stringify(state));
      return {
          monitoring: state.monitoring,
          topic_drpDwn: state.topic_drpDwn
      };
  }
  
  export default connect(mapStateToProps) (MonitoringPage);
  </code></pre>
  
  <p>and configure store looks like this:</p>
  
  <pre><code>export default function configureStore(initialState) {
      console.log("initial state: ", initialState)
      initialState = initialState || { topic_drpDwn: [] }
      console.log("initial state2: ", initialState)
      return finalCreateStore(
          rootReducer, 
          initialState
      );
  }
  </code></pre>
  
  <p><code>console.log</code> in here does print what I put in <code>index.js</code> as initial state, but if I console log the <code>this.props</code> inside of the <code>MonitoringPage</code> components, I don't see the initial state show up...</p>
  
  <pre><code>console.log("props:", this.props)
  {
    "children": null, 
    "history": {}, 
    "location": {
      "$searchBase": {
        "search": "", 
        "searchBase": ""
      }, 
      "action": "POP", 
      "hash": "", 
      "key": "9cjw6a", 
      "pathname": "/monitoring", 
      "query": {}, 
      "search": "", 
      "state": null
    }, 
    "monitoring": [], 
    "params": {}, 
    "route": {
      "path": "monitoring"
    }, 
    "routeParams": {}, 
    "routes": [
      {
        "childRoutes": [
          {
            "path": "onboarding"
          }, 
          {
            "path": "topicregistry"
          }, 
          {
            "path": "monitoring"
          }, 
          {
            "path": "about"
          }
        ], 
        "indexRoute": {}, 
        "path": "/"
      }, 
      {
        "path": "monitoring"
      }
    ]
  }
  </code></pre>
  
  <p>I'm trying to follow this guide on how to set the initial state outside of a reducer.</p>
  
  <p><a href="https://egghead.io/lessons/javascript-redux-supplying-the-initial-state" rel="nofollow noreferrer">https://egghead.io/lessons/javascript-redux-supplying-the-initial-state</a></p>
  
  <p>-----EDIT--------</p>
  
  <p>I took out the context in the constructor and then logged the props right after and got this back:</p>
  
  <pre><code>{
    "children": null, 
    "history": {}, 
    "location": {
      "$searchBase": {
        "search": "", 
        "searchBase": ""
      }, 
      "action": "POP", 
      "hash": "", 
      "key": "9cjw6a", 
      "pathname": "/monitoring", 
      "query": {}, 
      "search": "", 
      "state": null
    }, 
    "monitoring": [], 
    "params": {}, 
    "route": {
      "path": "monitoring"
    }, 
    "routeParams": {}, 
    "routes": [
      {
        "childRoutes": [
          {
            "path": "onboarding"
          }, 
          {
            "path": "topicregistry"
          }, 
          {
            "path": "monitoring"
          }, 
          {
            "path": "about"
          }
        ], 
        "indexRoute": {}, 
        "path": "/"
      }, 
      {
        "path": "monitoring"
      }
    ]
  }
  </code></pre>
  
  <p>Also, my monitoringReducer looks like this:</p>
  
  <pre><code>export default function monitoringReducer (state = [], action) {
      switch(action.type) {
          case 'TOPIC_SELECT':
  
              return Object.assign({}, state, topic_selected: [action.topic]);
  
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>and my rootReducer looks like this:</p>
  
  <pre><code>import {combineReducers} from 'redux';
  import monitoring from './monitoringReducer';
  
  const rootReducer = combineReducers({
      monitoring
  });
  
  export default rootReducer;
  </code></pre>