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

Question

我正在使用React Redux Starter Kit，并试图在组件/容器中组织我的代码，并努力寻找合适的过程。我意识到这是一个松散的线条，但喜欢一些关于如何更好地组织事物的输入。

目前我有3个文件 - CheckoutForm（一个redux表单），CheckoutView（一个简单的页面，具有表单）和CheckoutContainer，它现在几乎没有任何东西。在阅读关于组件/容器分离的建议之后，看起来CheckoutView应该是相同的，但是我也许应该将提交功能从它中提取出来并放到CheckoutContainer中？如何将我最好的重新连接验证码：

CheckoutContainer.js

import Checkout from '../components/CheckoutView' 

export default Checkout 

CheckoutView.js

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

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

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

export default CheckoutView 

CheckoutForm.js

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) 

Answer 1

容器的主要目的是消化组件需要从商店知道并传递给它的信息，并且还提供回调作为将处理容器中的动作分派的道具，所以组件仅具有传递它所知道的参数，就是这样。通过这种方式，您的组件可以完全知道它所需的内容，而不是其他任何东西，它甚至不知道Redux。在你的代码

看，你这样做是正确

I should perhaps pull the submit function out of it and put that in the 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 

当你的应用规模，您就可以从国家到组件的任何信息传递mapStateToProps和附加回调在mapDispatchToProps。