Question

我正在学习react / redux，我正在尝试创建一个简单的应用程序，它只是改变了道具onClick的状态。尝试通过react-redux connect()函数和mapStateToProps＆amp;和我的演示组件中的道具连接状态和操作时出错。 mapDispatchtoProps功能。当我运行我的应用程序时，浏览器控制台会读出一个错误，说明我在演示组件中声明的道具未指定，所以我假设这意味着错误在于我的容器。我已经阅读了文档并查看了几个示例应用程序，但我仍然没有看到我出错的地方。

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道具连接到redux动作，并将submitted道具连接到刚刚使用布尔值的状态。

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

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函数和操作。我选择不在此处包含它，因为它似乎没有涉及错误。

编辑：为了回应@ 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？

Answer 1

我的问题是我在HomeView导入了组件而不是容器。该文件中的更正代码如下：

import React from 'react'
import classes from './HomeView.scss'
const Login = require('../../Login/containers/LoginContainer').default

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

export default HomeView

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

1 个答案: