title: React-Redux: Uncaught TypeError: Cannot read property 'name' of undefined
body: <p>I'm new to Redux world and I'm trying to connect it with React. 
  I have structured my app in next way:</p>
  
  <p><strong>index.js:</strong></p>
  
  <pre><code>const userReducer = (state={
    name: "max"
  }, action) =&gt; {
  
    switch(action.type){
      case "SET_NAME":
        state = {
          ...state,
          name: action.payload
        };
      break;
    return state;
  };
  
  const myLogger= (store) =&gt;(next)=&gt;(action)=&gt;{
    console.log("logged action: ",action);
    next(action);
  };
  const store = createStore(combineReducers({user: userReducer}),{}, applyMiddleware(myLogger,logger));
  
  store.subscribe(()=&gt;{
    console.log("Store upadated", store.getState());
  });
  
  ReactDOM.render(
  
     &lt;BrowserRouter&gt;
      &lt;Provider store={store}&gt;
      &lt;App/&gt;
      &lt;/Provider&gt;
    &lt;/BrowserRouter&gt;,
  
      window.document.getElementById('container')); 
  </code></pre>
  
  <p><strong>app.js:</strong></p>
  
  <pre><code>class App extends React.Component{
  
        render(){
          return(
  
          &lt;div&gt;
           &lt;SearchBar
             username = {this.props.user.name}/&gt;
          &lt;/div&gt;
         )
        }  
      }
  
      const mapStateToProps = (state) =&gt; {
        return{
          user: state.user,
          math: state.math
        };
      };
  
      const mapDispatchToProps = (dispatch) =&gt; {
        return{
          setName: (name) =&gt;{
              dispatch({
                  type: "SET_NAME",
                  payload: name
              });
          }
        };
      };
  
      export default connect(mapStateToProps, mapDispatchToProps)(App);
  </code></pre>
  
  <p><strong>searchBar.js:</strong></p>
  
  <pre><code>export default class SearchBar extends React.Component{
  
      render(){
          return(
              &lt;div&gt;
                  Name: {this.props.username}
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>It seems like <code>name</code> variable from <code>userReducer</code> is not recognized while I am trying to pass it to <code>SearchBar</code> component.</p>
  
  <p>I am not sure why? Did I maybe structured my <code>index.js</code> wrong by trying to use <code>Provider</code> to provide store? Or maybe is it something wrong with my connect function?</p>
  
  <p>ERROR:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'name' of undefined
      at component (app.js:141)
      at mountIndeterminateComponent (react-dom.development.js:8574)
      at beginWork (react-dom.development.js:8978)
      at performUnitOfWork (react-dom.development.js:11814)
      at workLoop (react-dom.development.js:11843)
      at HTMLUnknownElement.callCallback (react-dom.development.js:100)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
      at invokeGuardedCallback (react-dom.development.js:187)
      at replayUnitOfWork (react-dom.development.js:11318)
      at renderRoot (react-dom.development.js:11885)
  </code></pre>