title: React Redux pass state as props to component
body: <p>In my React Redux application, when the main page loads, I want to fetch the data from an API and display it for the user to see. The data is being fetched from the action and the state is being updated. However, I am not seeing the state as a prop of the component. Not sure what's not hooked up correctly.</p>
  
  <p>Home component : </p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import * as actions from '../actions/actions';
  import '../styles/homeStyles.css';
  
  class Home extends Component {
    constructor(props) {
      super(props);
    }
  
    componentDidMount() {
      this.props.actions.fetchMovies();
    }
  
    render() {
      const { movies, isFetching, errorMessage } = this.props;
  
      if (isFetching &amp;&amp; !movies.length) {
        return &lt;p&gt;Loading...&lt;/p&gt;;
      }
  
      //will display movies when I have access to state
      return (
        &lt;div&gt;
          &lt;h1&gt;React Starter App&lt;/h1&gt;
          &lt;h2&gt;This is the home page&lt;/h2&gt;
        &lt;/div&gt; 
      );
    }
  }
  
  Home.proptypes = {
    actions: PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired,
    movies: PropTypes.array.isRequired,
    isFetching: PropTypes.bool.isRequired,
    errorMessage: PropTypes.string
  };
  
  function mapStateToProps(state) {
    return {
      movies: state.movies,
      isFetching: state.isFetching,
      errorMessage: state.errorMessage
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return { actions: bindActionCreators(actions, dispatch) };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Home);
  </code></pre>
  
  <p>store : </p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux';
  import thunkMiddleware from 'redux-thunk';
  import createLogger from 'redux-logger';
  import { syncHistoryWithStore } from 'react-router-redux';
  import { browserHistory } from 'react-router';
  
  import rootReducer from '../reducers/index';
  
  const initialState = {
    movies :{
      movies: [],
      isFetching: false,
      errorMessage: null,
      firstName: null,
      lastName: null,
      email: null
    }
  };
  
  const store = createStore(rootReducer, initialState, applyMiddleware(thunkMiddleware, createLogger()));
  
  export const history = syncHistoryWithStore(browserHistory, store);
  
  if (module.hot) {
    module.hot.accept('../reducers/', () =&gt; {
      const nextRootReducer = require('../reducers/index').default;
      store.replaceReducer(nextRootReducer);
    });
  }
  
  export default store;
  </code></pre>
  
  <p>App : </p>
  
  <pre><code>import React, { Component } from 'react';
  import Navbar from './Navbar';
  
  class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Navbar /&gt;
          &lt;div className="container"&gt;
            {this.props.children}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Index : </p>
  
  <pre><code>import React from 'react';
  import {render} from 'react-dom';
  import { Provider } from 'react-redux';
  import { Router, Route, IndexRoute } from 'react-router';
  import store, { history } from './store/store';
  require('./favicon.ico');
  import App from './components/App';
  import Home from './components/Home';
  import Contact from './components/Contact';
  import NotFoundPage from './components/NotFoundPage';
  
  const router = (
    &lt;Provider store={store}&gt;
      &lt;Router history={history} &gt;
        &lt;Route path="/" component={App}&gt;
          &lt;IndexRoute component={Home} /&gt;
          &lt;Route path="/contact" component={Contact} /&gt;
          &lt;Route path="*" component={NotFoundPage} /&gt;
        &lt;/Route&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;
  );
  
  render(router, document.getElementById('app'));
  </code></pre>
  
  <p>Reducer : </p>
  
  <pre><code>import * as constants from '../constants/constants';
  
  const initialState = {
    movies: [],
    isFetching: false,
    errorMessage: null
  };
  
  const moviesReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case constants.FETCH_MOVIES : 
        return {
          ...state,
          isFetching: true
        };
      case constants.FETCH_MOVIES_SUCCESS :
        return {
          ...state,
          movies: [action.data],
          isFetching: false
        };
      case constants.FETCH_MOVIES_ERROR :
        return {
          ...state,
          isFetching: false,
          errorMessage: action.message
        };
      default :
        return state;
    }
  };
  
  export default moviesReducer;
  </code></pre>