在 component/container 中组织 React 应用程序

Question

我正在使用 React Redux Starter Kit 并尝试在 component/container 中组织我的代码，并且在寻找正确的过程时遇到了一些困难。我意识到这有点松散，但我希望就如何更好地组织事物提供一些意见。

目前我有 3 个文件 - CheckoutForm（一种 redux 表单）、CheckoutView（一个具有表单的简单页面）和 CheckoutContainer，后者现在几乎什么都不做。根据阅读有关 component/container 分离的建议，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

容器的主要目的是从 store 中提取组件需要知道的信息并将其传递给它，同时提供回调作为 props 来处理容器中的动作调度，所以组件只需要传递它知道的参数，仅此而已。这样你的组件就知道并做它所需要的，没有别的，它甚至根本不知道 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 中的其他回调。

在 component/container 中组织 React 应用程序

Organizing React app in component/container

reactjs

redux

react-redux

redux-form