将操作和状态连接到React Container中的props

我试图创建一个只改变道具 onClick 状态的简单应用程序 . 尝试通过react-redux connect() 函数和 mapStateToProps ＆ mapDispatchtoProps 函数将我的状态和操作连接到演示组件中的props时出错 . 当我运行我的应用程序时，浏览器控制台会读出一条错误，指出我在演示组件中声明的道具没有指定，所以我'm assuming that means that the error lies in my container. I'已经阅读了文档并查看了几个示例应用程序，但我仍然没有't see where I'我错了 .

LoginContainer.js 代码：

import { connect } from 'react-redux'
import { submit } from '../modules/login'
import Login from 'components/Login'

const mapDispatchtoProps = {
  submit
}

const mapStateToProps = (state) => ({
  submitted: state.submitted
})

export default connect(mapStateToProps, mapDispatchtoProps)(Login)

我导入了所需的函数 connect() ，函数 submit ，这是触发reducer（我已经连接到商店）的动作，以及我要连接的组件 . 然后我将 submit prop连接到redux动作，并将 submitted prop连接到状态，这只是一个布尔值 .

我的简化登录组件代码（以防万一）：

import React from 'react'

export const Login = (props) => (
  <div>
    <button type="button" onClick={props.submit}>Submit</button>
    <p>{props.submitted ? "true" : "false"}</p>
  </div>
)

Login.propTypes = {
  submit: React.PropTypes.func.isRequired,
  submitted: React.PropTypes.bool.isRequired
}

export default Login

让我知道是否应该包含我引用的 module/login 文件，其中包含reducer函数和操作 . 我选择不在此处包含它，因为它似乎没有涉及错误 .

Edit: 为了回应@ anoop的评论，我将登录组件导入登录容器代码 . 组件本身被插入到 HomeView 组件中，因此根本不会在路由中显式引用登录组件 . 引用这些文件的唯一其他地方是我将reducer注入商店的时候 .

我的injectReducer代码：

import { injectReducer } from '../../store/reducers'

export default (store) => ({
  path: '',
  getComponent (nextState, cb) {
    require.ensure([], (require) => {
      const Login = require('./containers/LoginContainer').default
      const reducer = require('./modules/login').default
      injectReducer(store, { key: 'login', reducer })
      cb(null, Login)
  }, 'login')
  }
})

HomeView 组件代码：

import React from 'react'
import Login from '../../../components/Login/Login.js'

export const HomeView = () => (
  <div>
    <Login />
  </div>
)

export default HomeView

简化的 createRoutes 文件：

import CoreLayout from '../layouts/CoreLayout/CoreLayout'
import NotFound from './NotFound'
import Home from './Home'
//import ExampleRoute from './Example'

export const createRoutes = (store) => ({
  path: '/',
  component: CoreLayout,
  indexRoute: Home,
  getChildRoutes (location, next) {
    require.ensure([], (require) => {
      next(null, [
        //require('./Example').default(store),
        require('./NotFound').default
      ])
    })
  }
})

export default createRoutes

看完路由文件后，我意识到在 createRoutes 函数中，我作为参数传入了商店，但从未在函数中使用它 . 我正在使用一个样板应用程序，它最初有一个传递 store 值的路径 . 在上面的代码中，我注释掉了使用的路由语法 .

我想我的问题现在已演变为以下内容：由于登录组件嵌套在 HomeView 组件内，我是否需要将商店传递给Home路由？如果是这样，我如何将其传递到默认的 Home 路线，如上面评论的 exampleRoute ？