将操作和状态连接到React容器中的道具

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

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，这是触发减速器（我已经连接到商店）的动作，和我要连接的部件至。然后，我将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文件我引用，其中包含减速功能和操作。我选择不把它包含在这里，因为它似乎没有涉及到错误。

编辑：为了回应@ 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路线，如上面的注释exampleRoute？

来源

2016-08-17 Nick Borisenko

你如何在路由或任何其他文件中使用它，你可以分享吗？..你正在导入LoginContainer或LoginComponent吗？ – anoop

我的问题是我导入组件，而不是我的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

来源

2016-08-23 21:59:57

将操作和状态连接到React容器中的道具

回答

相关问题