{"action":"created","issue":{"url":"https://api.github.com/repos/davezuko/react-redux-starter-kit/issues/974","repository_url":"https://api.github.com/repos/davezuko/react-redux-starter-kit","labels_url":"https://api.github.com/repos/davezuko/react-redux-starter-kit/issues/974/labels{/name}","comments_url":"https://api.github.com/repos/davezuko/react-redux-starter-kit/issues/974/comments","events_url":"https://api.github.com/repos/davezuko/react-redux-starter-kit/issues/974/events","html_url":"https://github.com/davezuko/react-redux-starter-kit/issues/974","id":172029651,"number":974,"title":"Component works on separate page but not the home page","user":{"login":"nickboris","id":12787967,"avatar_url":"https://avatars.githubusercontent.com/u/12787967?v=3","gravatar_id":"","url":"https://api.github.com/users/nickboris","html_url":"https://github.com/nickboris","followers_url":"https://api.github.com/users/nickboris/followers","following_url":"https://api.github.com/users/nickboris/following{/other_user}","gists_url":"https://api.github.com/users/nickboris/gists{/gist_id}","starred_url":"https://api.github.com/users/nickboris/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nickboris/subscriptions","organizations_url":"https://api.github.com/users/nickboris/orgs","repos_url":"https://api.github.com/users/nickboris/repos","events_url":"https://api.github.com/users/nickboris/events{/privacy}","received_events_url":"https://api.github.com/users/nickboris/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-08-19T00:18:43Z","updated_at":"2016-08-19T23:16:37Z","closed_at":null,"body":"I'm learning react/redux and wanted to create a simple button component that toggles the state of a prop, but I'm having trouble figuring out how to implement an identical component on two different pages. I was trying to insert the component on the homepage, but I kept getting an error saying that I hadn't defined the props that I specified in the presentational component file, although I thought that I had created the container correctly. I tested the component on a separate page (`/login`) and it worked correctly, but I still get a weird error in the browser console on the home page that `Failed prop type: Required prop 'submitted' was not specified in 'Login'` and likewise for my other prop, `submit`. From what I understand, this error means that I haven't properly linked the action/state properties to my react props. What do I need to add/fix in my code in order to solve this problem?\r\n\r\nroutes/Home/components/HomeView.js:\r\n\r\n    import React from 'react'\r\n    import Login from '../../../components/Login/Login.js'\r\n\r\n    export const HomeView = () => (\r\n      <div>\r\n        <Login />\r\n      </div>\r\n    )\r\n    export default HomeView\r\n\r\nroutes/Home/index.js:\r\n\r\n````\r\nimport HomeView from './components/HomeView\r\nexport default {\r\n  component: HomeView\r\n}\r\n```\r\n\r\ncomponents/Login/Login.js:\r\n\r\n```\r\nimport React from 'react'\r\n\r\nexport const Login = (props) => (\r\n  <div>\r\n    <button onClick={props.submit}>Sign in</button>\r\n    <p>{props.submitted ? \"true\" : \"false\"}</p>\r\n  </div>\r\n)\r\n\r\nLogin.propTypes = {\r\n  submit: React.PropTypes.func.isRequired,\r\n  submitted: React.PropTypes.bool.isRequired\r\n}\r\n\r\nexport default Login\r\n```\r\n\r\nroutes/Login/containers/LoginContainer.js\r\n\r\n```\r\nimport { connect } from 'react-redux'\r\nimport { submit } from '../modules/login'\r\nimport Login from 'components/Login'\r\n\r\nconst mapDispatchToProps = {\r\n  submit\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n  submitted: state.login.submitted\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Login)\r\n```\r\n\r\nroutes/Login/modules/login.js:\r\n\r\n```\r\nexport const SUBMIT = 'SUBMIT'\r\n\r\nexport function submit () {\r\n  return {\r\n    type: SUBMIT\r\n  }\r\n}\r\n\r\nconst initialState = {\r\n  submitted: false\r\n}\r\nexport default function formHandler (state = initialState, action) {\r\n  switch (action.type) {\r\n    case SUBMIT:\r\n      return {...state, submitted: !state.submitted}\r\n    default:\r\n      return state\r\n  }\r\n}\r\n```\r\n\r\nroutes/Login/index.js:\r\n\r\n```\r\nimport { injectReducer } from '../../store/reducers'\r\n\r\nexport default (store) => ({\r\n  path: '/login',\r\n  /*  Async getComponent is only invoked when route matches   */\r\n  getComponent (nextState, cb) {\r\n    /*  Webpack - use 'require.ensure' to create a split point\r\n        and embed an async module loader (jsonp) when bundling   */\r\n    require.ensure([], (require) => {\r\n      /*  Webpack - use require callback to define\r\n          dependencies for bundling   */\r\n      const Login = require('./containers/LoginContainer').default\r\n      const reducer = require('./modules/login').default\r\n\r\n      /*  Add the reducer to the store on key 'counter'  */\r\n      injectReducer(store, { key: 'login', reducer })\r\n\r\n      /*  Return getComponent   */\r\n      cb(null, Login)\r\n\r\n    /* Webpack named bundle   */\r\n  }, 'login')\r\n  }\r\n})\r\n```\r\n\r\nroutes/index.js:\r\n\r\n```\r\nimport CoreLayout from '../layouts/CoreLayout/CoreLayout'\r\nimport NotFound from './NotFound'\r\nimport Home from './Home'\r\nimport CounterRoute from './Counter'\r\nimport LoginRoute from './Login'\r\nimport SignUpView from './SignUp'\r\n\r\nexport const createRoutes = (store) => ({\r\n  path: '/',\r\n  component: CoreLayout,\r\n  indexRoute: Home,\r\n  getChildRoutes (location, next) {\r\n    require.ensure([], (require) => {\r\n      next(null, [\r\n        require('./Login').default(store),\r\n        require('./Counter').default(store),\r\n        require('./Timeline').default,\r\n        require('./SignUp').default,\r\n        require('./NotFound').default\r\n      ])\r\n    })\r\n  }\r\n})\r\n\r\nexport default createRoutes\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/davezuko/react-redux-starter-kit/issues/comments/241158016","html_url":"https://github.com/davezuko/react-redux-starter-kit/issues/974#issuecomment-241158016","issue_url":"https://api.github.com/repos/davezuko/react-redux-starter-kit/issues/974","id":241158016,"user":{"login":"twelch","id":81816,"avatar_url":"https://avatars.githubusercontent.com/u/81816?v=3","gravatar_id":"","url":"https://api.github.com/users/twelch","html_url":"https://github.com/twelch","followers_url":"https://api.github.com/users/twelch/followers","following_url":"https://api.github.com/users/twelch/following{/other_user}","gists_url":"https://api.github.com/users/twelch/gists{/gist_id}","starred_url":"https://api.github.com/users/twelch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/twelch/subscriptions","organizations_url":"https://api.github.com/users/twelch/orgs","repos_url":"https://api.github.com/users/twelch/repos","events_url":"https://api.github.com/users/twelch/events{/privacy}","received_events_url":"https://api.github.com/users/twelch/received_events","type":"User","site_admin":false},"created_at":"2016-08-19T23:16:37Z","updated_at":"2016-08-19T23:16:37Z","body":"The [CounterContainer](https://github.com/davezuko/react-redux-starter-kit/blob/master/src/routes/Counter/containers/CounterContainer.js) is a good example to follow if you didn't catch it.\r\n\r\nThe require should be a direct replacement as you did.  Have you looked at the value of connectLogin at runtime after the require?  You might have exported the container improperly.  It should be a wrapped component.  You should also be able to set a break in the component render method and see that it is actually getting called and the props are passed in properly from the container with the mapped state or action creators."}}
{"actor":{"display_login":"twelch"}}