title: Unable to trigger an update with Redux
body: <p>I am new to redux and I am trying to build a simple Hello World to try out this library. However, I am having trouble with getting the value in the Home component. The two buttons should trigger two different changes. I think the errors must have something to do with the connect method. After hours of research, I still cannot figure out why it does not work. Thank you in advance.</p>
  
  <p>Below is my code:</p>
  
  <p>Home.js -> component</p>
  
  <pre><code>import React from "react";
  import { connect } from "react-redux";
  import * as actionCreators from "../actions/display.js";
  import { bindActionCreators } from "redux";
  
  const Home = props =&gt; {
    return (
      &lt;div&gt;
        Message:
        &lt;h1&gt;{props.message}&lt;/h1&gt;
        &lt;button onClick={props.sayHi}&gt;SayHI&lt;/button&gt;
        &lt;button onClick={props.sayHello}&gt;Say Hello&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  function mapStateToProps(state) {
    return { ...state };
  }
  
  function mapDispatchToProps(dispatch) {
    return bindActionCreators(
      {
        ...actionCreators
      },
      dispatch
    );
  }
  export default connect(mapStateToProps, mapDispatchToProps)(Home);
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React from "react";
  
  import { createStore, combineReducers, applyMiddleware } from "redux";
  import { Provider } from "react-redux";
  
  import createHistory from "history/createBrowserHistory";
  import { Route } from "react-router";
  
  import {
    ConnectedRouter,
    routerReducer,
    routerMiddleware
  } from "react-router-redux";
  import Home from "./components/Home";
  import reducers from "./reducers/reducer"; // Or wherever you keep your reducers
  
  // Create a history of your choosing (we're using a browser history in this case)
  const history = createHistory();
  
  // Build the middleware for intercepting and dispatching navigation actions
  const middleware = routerMiddleware(history);
  
  // Add the reducer to your store on the `router` key
  // Also apply our middleware for navigating
  const store = createStore(
    combineReducers({
      ...reducers,
      router: routerReducer
    }),
    applyMiddleware(middleware)
  );
  
  const App = () =&gt; (
    &lt;Provider store={store}&gt;
      {/* ConnectedRouter will use the store from Provider automatically */}
      &lt;ConnectedRouter history={history}&gt;
        &lt;Route path="/" component={Home} /&gt;
      &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;
  );
  
  export default App;
  </code></pre>
  
  <p>reducer.js</p>
  
  <pre><code>import { SAY_HELLO, SAY_HI } from "../constants";
  
  const initialState = {
    message: "Mark"
  };
  const reducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case SAY_HELLO:
        return { ...state, message: "Hello Mark" };
      case SAY_HI:
        return { ...state, message: "Hi Mark" };
      default:
        return state;
    }
  };
  
  export default reducer;
  </code></pre>
  
  <p>actions/display.js</p>
  
  <pre><code>import { SAY_HELLO, SAY_HI } from "../constants";
  
  export const sayHello = () =&gt; ({
    type: SAY_HELLO
  });
  export const sayHi = () =&gt; ({
    type: SAY_HI
  });
  </code></pre>
  
  <p>constants.js</p>
  
  <pre><code>export const SAY_HELLO = "SAY_HELLO";
  export const SAY_HI = "SAY_HI";
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>I figured a working solution for my code but not an ideal one. I change state=>({message:state.message}) to state=>state which means now my component subscrubes to the global state. I also change{props.message} to {props.defaultmessage} in the hi tag on Home.js. Below is the updated code.</p>
  
  <pre><code>import React from "react";
  import { connect } from "react-redux";
  import { sayHello, sayHi } from "../actions/display.js";
  
  const Home = props =&gt; {
    return (
      &lt;div&gt;
        Message:
        {console.log(props.default.message)}
        &lt;h1&gt;{props.default.message}&lt;/h1&gt;
        &lt;button onClick={props.sayHi}&gt;SayHI&lt;/button&gt;
        &lt;button onClick={props.sayHello}&gt;Say Hello&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default connect(state =&gt; state, {
    sayHello,
    sayHi
  })(Home);
  </code></pre>