将动作和状态连接到 React Container 中的 props答案

【问题标题】：Connecting actions and states to props in React Container将动作和状态连接到 React Container 中的 props
【发布时间】：2016-08-24 05:59:57
【问题描述】：

我正在学习 react/redux，我正在尝试创建一个简单的应用程序，该应用程序仅更改道具 onClick 的状态。尝试通过 react-redux connect() 函数和 mapStateToProps 和 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 文件，请告诉我，其中包含减速器函数和操作。我选择不在这里包含它，因为它似乎与错误无关。

编辑：响应@anoop 的评论，我将登录组件导入到登录容器代码中。组件本身被插入到HomeView 组件中，因此登录组件根本不会在路由中显式引用。引用这些文件的唯一其他地方是当我将减速器注入存储时。

我的 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作为参数传入，但从未在函数中使用过。我正在使用一个样板应用程序，它最初有一个将store 值传递给它的路由。在上面的代码中，我注释掉了使用的路由语法。

我想我的问题现在已经演变成以下问题：由于登录组件嵌套在 HomeView 组件内，我是否需要将商店传递给 Home 路由？如果是这样，我如何将它传递给默认的Home 路由，如上面注释的exampleRoute 中的那样？

【问题讨论】：

你如何在路由或任何其他文件中使用它，你能也分享一下吗？.. 你是在导入 LoginContainer 还是 LoginComponent ？

标签： reactjs redux

【解决方案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

【讨论】：