Ich versuche, meine App so umzugestalten, dass sie Präsentations- und Containerkomponenten voneinander trennt. Meine Containerkomponenten sind nur die Präsentationskomponenten, die in @ eingeschlossen sinconnect() ruft von react-redux auf, wobei Status- und Aktionsersteller den Requisiten der Präsentationskomponenten zugeordnet werden.

todo-list.container.js

import React, {Component} from 'react';
import {connect} from 'react-redux';

import {fetchTodos} from '../actions/todo.actions';
import TodoList from '../components/todo-list.component';

export default connect(({todo}) => ({state: {todo}}), {fetchTodos})(TodoList);

todo-list.component.jsx

import React, {Component} from 'react';

import TodoContainer from '../containers/todo.container';

export default class TodoList extends Component {
    componentDidMount () {
        this.props.fetchTodos();
    }

    render () {
        const todoState = this.props.state.todo;

        return (
            <ul className="list-unstyled todo-list">
                {todoState.order.map(id => {
                    const todo = todoState.todos[id];
                    return <li key={todo.id}><TodoContainer todo={todo} /></li>;
                })}
            </ul>
        );
    }
};

todo.container.js

import React, {Component} from 'react';
import {connect} from 'react-redux';

import {createTodo, updateTodo, deleteTodo} from '../actions/todo.actions';
import Todo from '../components/todo.component';

export default connect(null, {createTodo, updateTodo, deleteTodo})(Todo);

todo.component.jsx

import React, {Component} from 'react';

import '../styles/todo.component.css';

export default class Todo extends Component {
    render () {
        return (
            <div className="todo">
                {todo.description}
            </div>
        );
    }
};

Was ich herausfinden will ist folgendes: Ich weiß, ich solltenich binde das @ e<TodoContainer /> Element innerhalb vonTodoList weilTodoList ist eine Präsentationskomponente und sollte nur andere Präsentationskomponenten darin verschachteln. Aber wenn ich es mit nur einem @ erset<Todo /> Präsentationskomponente, dann muss ich jede Zustandsstütze und Action Creator Stütze in @ abbildTodoListContainer dass dieTodoie @ -Komponente müsste sie alle manuell als Requisiten durch die Kette leiten. Dies ist etwas, das ich natürlich vermeiden möchte, besonders wenn ich anfange, mehr Ebenen zu verschachteln oder abhängig von weiteren Requisiten von Redux zu beginnen.

Mache ich das richtig? Es scheint, dass ich im Allgemeinen nicht versuchen sollte, eine Containerkomponente in eine Präsentationskomponente einzubetten, da sie wiederverwendbarer werden, wenn ich Präsentationskomponenten von Redux entkoppeln kann. Gleichzeitig weiß ich nicht, wie ich eine Komponente, die Zugriff auf den Redux-Status / Versand benötigt, in eine andere Komponente mit Markup einbetten soll.