구성 요소/컨테이너에 React 앱을 구성하는 중

구성 요소/컨테이너에 React 앱을 구성하는 중

ReactRedex Starter Kit와 함께 작업 중이고 구성 요소/컨테이너에 코드를 정리하려고 하며 올바른 프로세스를 찾는 데 약간 애를 먹고 있다.느슨한 줄이면 좀 그렇긴 한데, 어떻게 하면 더 잘 정리할 수 있을까에 대한 의견을 좀 듣고 싶어.

현재 나는 체크아웃폼(ReducationForm), 체크아웃뷰(양식이 있는 간단한 페이지), 그리고 지금 거의 아무것도 하지 않는 체크아웃컨테이너 등 3개의 파일을 가지고 있다.구성 요소/컨테이너 분리에 대한 읽기의 조언에 따라 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

체크아웃 양식.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)

컨테이너의 주요 목적은 구성품이 스토어에서 알아야 할 정보를 소화하여 전달하고, 또한 콜백을 컨테이너의 행동 배달을 처리할 소품으로 제공하므로 구성품은 자신이 알고 있는 파라미터만 통과하면 되는 것이고, 바로 그것이다.이렇게 하면 당신의 구성 요소는 그것이 필요로 하는 것을 정확히 알고, 다른 것은 아무것도 하지 않으며, Redex를 전혀 인식하지 못한다.

네 코드를 보니 제대로 알아들었구나.

제출 기능을 빼서 체크아웃 컨테이너에 넣어야 할 것 같아

그것이 바로 당신이 해야 할 일이니, 그것은 그 구성 요소가 신경 쓰지 말아야 할 유일한 것이기 때문이다.

당신의 컨테이너에

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.

참조URL: https://stackoverflow.com/questions/38986599/organizing-react-app-in-component-container