Question

我正在使用React Redux入门工具包，我正在尝试在组件/容器中组织我的代码，并在找到正确的过程时苦苦挣扎。我意识到这有点松散，但我喜欢关于如何更好地组织事情的一些意见。

目前我有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

容器的主要目的是从存储中消化组件需要知道的信息并将其传递给它，并且还提供回调作为将处理容器中的操作的调度的props，因此仅限组件必须传递它知道的参数，就是这样。通过这种方式，您的组件可以确切地知道它所需要的内容，而不是其他内容，而且它甚至根本不了解Redux。

查看您的代码，您做对了

我应该从中提取提交功能并将其放入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中的其他回调。

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

1 个答案: