React Redux состав

Question

Я хочу воссоздать типичный образец пользовательского интерфейса, используя React and Redux - Modal Window с data form содержащий 4 inputs/selects UI elements. Я много читал о компонентах смарт-контейнера и немых презентационных компонентах, но не располагаю достаточной практикой для определения наилучшего состава композиции в данном конкретном случае.
В настоящее время я понял, следующие компоненты составляют:

<ModalContainer /> 
<ModalWindow /> 
<Form /> 
<Input 1/> ... <Input 2/> 

Пожалуйста, совет:

1. компоненты Witch следует рассматривать Смарт и Тупой?
2. Как реализовать правильный поток данных с помощью Redux?
3. Как состав компонента может выглядеть в этом случае?
4. Любые канонические примеры кода или блоги, о которых нужно прочитать?

Answer 1

Какие компоненты следует учитывать как умный, так и немой?

Вся ваша логика должна присутствовать в ваших умных компонентах как контейнеры, вы получаете все данные здесь и передаете это своим презентационным компонентам, которые только отображают компоненты (ничего больше, поэтому их называют немыми). Есть замечательная статья об этом here, которая объясняет это очень хорошо.

Как реализовать правильный поток данных с помощью Redux?

Хорошо, я бы сказал, что этот вопрос действительно широк, и сокращение docs само по себе является действительно хорошим способом понять это.

Как состав компонента может выглядеть в этом случае?

ModalContainer.js

class ModalContainer extends React.Component{ 
    render(){ 
    return <Modal {...this.props} /> 
    } 
} 

function mapDispatchToProps(dispatch){ 
//map your dispatches here 
} 

export default connect()(ModalContainer) 

Modal.js

class Modal extends React.Component{ 
    render() { 
    // you can change your modal content here based on some props, make it more generic 
    <Form {...this.props}/> 
    } 
} 

export default Modal 

Form.js

class Form extends React.Component{ 

    onSubmit() { 
    const {dispatch} = this.props 
    //dispatch your action here to call API and update store 
    } 
    render() { 
    <Form onSubmit={this.onSubmit.bind(this)> 
     //form data 
    </Form> 
    } 
} 

export default Form 

PS:

1. Вы можете сделать его более универсальным путем создания FormWrapper, который, основываясь на реквизита дает Вам конкретную форму в вашем модальный (другими словами, вы можете изменить содержание модальных и использовать ту же модальность везде)
2. Вышеупомянутый код - это всего лишь демонстрационный код, показывающий, как вы можете компоновать свои компоненты, но должен работать с небольшими изменениями.

Любые канонические примеры кода или блоги для чтения?

Sound Redux - Я нашел этот код действительно чистым и полезным в начале.

Пожалуйста, спросите, нужно ли вам что-нибудь еще