React&Redux:connect()到多个组件和最佳实践

武装部队:

我正在做我的第一个React / Redux项目,我有一个小问题。我已经阅读了文档,并观看了https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist上可用的教程

但我还有一个问题。关于登录页面。所以我有一个名为LoginForm的演示组件:

组件/LoginForm.js

import { Component, PropTypes } from 'react'

class LoginForm extends Component {
   render () {
      return (
         <div>
            <form action="#" onSubmitLogin={(e) => this.handleSubmit(e)}>
               <input type="text" ref={node => { this.login = node }} />
               <input type="password" ref={node => { this.password = node }} />
               <input type="submit" value="Login" />
            </form>
         </div>
      )
   }

   handleSubmit(e) {
      e.preventDefault();
      this.props.onSubmitLogin(this.login.value, this.password.value);
   }
}

LoginForm.propTypes = {
   onSubmitLogin: PropTypes.func.isRequired
};

export default LoginForm;

还有一个名为Login的容器组件,它将数据传递给我的组件。使用react-redux-router,我将此容器(而不是presentationnal组件)称为:

container / Login.js

import { connect } from 'react-redux'
import { login } from '../actions/creators/userActionCreators'
import LoginForm from '../components/LoginForm'

const mapDispatchToProps = (dispatch) => {
   return {
      onSubmitLogin: (id, pass) => dispatch(login(id, pass))
   }
};

export default connect(null, mapDispatchToProps)(LoginForm);

如您所见,我正在使用connectredux提供方法来创建我的容器。

我的问题是以下问题:

如果我希望我的Login容器使用多个视图(例如:LoginForm和errorList来显示错误),则需要手动执行(不使用connect,因为connect只接受一个参数)。就像是 :

class Login extends Component {

   render() {
      return (
         <div>
            <errorList />
            <LoginForm onSubmitLogin={ (id, pass) => dispatch(login(id, pass)) } />
         </div>
      )
   }

}

这是不好的做法吗?是否最好创建同时使用errorList和LoginForm的另一个表示性组件(LoginPage),并创建要登录connect到LoginPage 的容器(Login)


编辑:如果我创建第三个演示组件(LoginPage),我将不得不两次传递数据。这样:Container -> LoginPage -> LoginForm & ErrorList即使有上下文,这似乎也不是要走的路。

尼克·鲍尔(Nick Ball):

我认为第二个示例中的内容非常接近。您只能创建一个已连接的容器组件,并呈现多个演示组件。

在第一个示例中,实际上没有单独的容器组件:

import { connect } from 'react-redux'
import { login } from '../actions/creators/userActionCreators'
import LoginForm from '../components/LoginForm'

const mapDispatchToProps = (dispatch) => {
   return {
      onSubmitLogin: (id, pass) => dispatch(login(id, pass))
   }
};

// `LoginForm` is being passed, so it would be the "container"
// component in this scenario
export default connect(null, mapDispatchToProps)(LoginForm);

即使它在单独的模块中,您在这里所做的还是LoginForm直接连接您的模块

相反,您可以执行以下操作:

container / Login.js

import { connect } from 'react-redux'
import { login } from '../actions/creators/userActionCreators'
import LoginForm from '../components/LoginForm'
import ErrorList from '../components/ErrorList'

class Login extends Component {

   render() {
      const { onSubmitLogin, errors } = this.props;

      return (
         <div>
            <ErrorList errors={errors} />
            <LoginForm onSubmitLogin={onSubmitLogin} />
         </div>
      )
   }

}

const mapDispatchToProps = (dispatch) => {
   return {
      onSubmitLogin: (id, pass) => dispatch(login(id, pass))
   }
};

const mapStateToProps = (state) => {
   return {
       errors: state.errors
   };
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);

请注意,该Login组件现在正在传递给connect,使其成为“容器”组件,然后errorListLoginForm都可以是表示形式。Login容器可以通过prop传递其所有数据

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React.js关于侦听组件窗口事件的最佳实践

在React&Redux内部使用酶进行嵌套组件测试

解耦React组件和Redux Connect

处理Redux和React中错误的最佳实践

将Redux状态传递到组件时的最佳实践

React&Redux:Uncaught TypeError:(0,_reactRedux.connect)不是一个函数

为React组件和函数(包括文件名)命名最佳实践

React&Redux Reducer不会改变

在React中使用嵌套组件的最佳实践

从Svelte组件公开和调用方法的最佳实践

处理来自API调用和呈现React组件的数据的最佳实践

在组件内部使用redux状态的最佳实践是什么?

React Hooks和React-Redux connect:使它们协同工作的最佳实践是什么?

如何使用React&Redux添加多个页面

在功能组件React中定义状态的最佳实践

Angular + Ngrx:在组件和函数中选择值的最佳实践

React Layout组件最佳实践

使用react-redux,通过redux状态将回调函数传递给通用组件的最佳实践是什么?

JSF最佳实践:自定义组件和JavaScript

多个ViewModel的最佳实践

在React中将状态和回调从根组件传递到叶组件的最佳实践是什么?

mapDispatchToProps 与 react-redux' connect() 和类组件

设置 React 组件样式的最佳实践

反应 ul 和 li 元素“组件化”的最佳实践

React Redux Connect 包装组件

React 中的渲染和最佳实践

React 最佳实践:在哪里*不*渲染组件?

React 最佳实践:在哪里*不*渲染组件?

从 react-bootstrap 导入多个组件的最佳实践?