Reactjs 在组件/容器中组织React应用程序

我正在使用React Redux初学者工具包，试图在组件/容器中组织我的代码，并努力找到正确的过程。我意识到这有点松散，但我想知道如何更好地组织事情

目前我有3个文件-CheckoutForm（一个redux表单）、CheckoutView（一个包含该表单的简单页面）和CheckoutContainer，它现在几乎什么都不做。按照阅读有关组件/容器分离的建议，CheckoutView应该是相同的，但我可能应该从中拉出submit函数并将其放入CheckoutContainer？我如何最好地重新布线此代码：

CheckoutContainer.js

CheckoutView.js

从“React”导入React
从“./CheckoutView.scss”导入类
从“../forms/CheckoutForm”导入CheckoutForm
const submit=require（'../modules/submit'）。默认值
导出常量签出视图=（）=>(
结账
)
导出默认签出视图

CheckoutForm.js

从'redux form'导入{Field，reduxForm}
常量renderField=（{input，label，type，meta:{toucted，error}}）=>(
{label}
{触摸&&error&&{error}
)
const CheckoutForm=（道具）=>{
const{error，handleSubmit，pristite，reset，submiting}=props
返回(
{error&&{error}}
登录
明确的价值观
)
}
导出默认reduxForm({
表格：'checkoutForm'
})（检查表）

容器的主要用途是从存储中提取组件需要知道的信息并将其传递给它，同时还提供回调作为处理容器中动作分派的道具，因此组件只需传递它知道的参数即可。通过这种方式，您的组件可以准确地知道并执行它需要的内容，而不需要其他任何东西，而且它甚至根本不知道Redux

看看你的代码，你是对的

我也许应该把submit函数从中拉出来，放到CheckoutContainer中

这正是您应该做的，因为这是组件唯一不应该关心的事情

在你的容器里

import { connect } from 'react-redux';
import Checkout from '../components/CheckoutView';

const submit = require('../modules/submit').default

const mapStateToProps = state => {
    return { };
};

const mapDispatchToProps = dispatch => {
    return { onSubmit: submit };
};

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

并且认为：

import React from 'react'
import classes from './CheckoutView.scss'
import CheckoutForm from '../forms/CheckoutForm'

export const CheckoutView = ({ onSubmit }) => (
  <div>
    <h4 className={classes.header}>Checkout</h4>
    <CheckoutForm onSubmit={onSubmit}/>
  </div>
)

export default CheckoutView

从“React”导入React
从“./CheckoutView.scss”导入类
从“../forms/CheckoutForm”导入CheckoutForm
导出常量CheckoutView=（{onSubmit}）=>(
结账
)
导出默认签出视图

---

随着应用程序的扩展，您可以在

mapStateToProps

中将状态的任何信息传递给组件，并在

mapDispatchToProps

中传递其他回调，谢谢。所以我把容器里的Redux线拔了出来。但是，即使我在这条路线上没有其他事情需要redux，这也是传递道具的推荐方式吗？如果你是按书办事，那么

。/modules/submit

功能应该是一个动作。这是推荐的方法，是的，但是您愿意将Redux集成到开发中的程度是您自己的决定。为什么在CheckoutView第5行中会出现错误：“ReferenceError:找不到变量：React”？我想我需要在表单中导入React，即使它没有显式使用。奇怪的是，它在传输代码中被显式使用，任何使用JSX语法的地方都必须定义React。

import { Field, reduxForm } from 'redux-form'

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type}/>
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

const CheckoutForm = (props) => {
  const { error, handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="username" type="text" component={renderField} label="Username"/>
      <Field name="password" type="password" component={renderField} label="Password"/>
      {error && <strong>{error}</strong>}
      <div>
        <button type="submit" disabled={submitting}>Log In</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'checkoutForm' 
})(CheckoutForm)

import { connect } from 'react-redux';
import Checkout from '../components/CheckoutView';

const submit = require('../modules/submit').default

const mapStateToProps = state => {
    return { };
};

const mapDispatchToProps = dispatch => {
    return { onSubmit: submit };
};

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

import React from 'react'
import classes from './CheckoutView.scss'
import CheckoutForm from '../forms/CheckoutForm'

export const CheckoutView = ({ onSubmit }) => (
  <div>
    <h4 className={classes.header}>Checkout</h4>
    <CheckoutForm onSubmit={onSubmit}/>
  </div>
)

export default CheckoutView