Вложение компонента контейнера в презентационный компонент
Я пытаюсь реорганизовать свое приложение, чтобы разделить компоненты представления и контейнера. Мои контейнерные компоненты - это просто презентационные компоненты, завернутые вconnect()
вызовы из response-redux, которые отображают создателей состояний и действий на реквизиты компонентов представления.
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>
);
}
};
Вот что я пытаюсь понять: я знаю, что долженне встраивать<TodoContainer />
элемент внутриTodoList
так какTodoList
является презентационным компонентом, и в него должны быть вложены только другие презентационные компоненты. Но если я заменю его просто<Todo />
компонент представления, то я должен отобразить каждую пропу штата и действие пропеллер создателя вTodoListContainer
чтоTodo
Компонент будет необходимо и передать их все вниз по цепочке вручную в качестве реквизита. Это то, чего я, конечно же, хочу избежать, особенно если я начну вкладывать больше уровней или начну зависеть от большего количества реквизитов из Redux.
Я правильно подхожу к этому? Кажется, мне не следует пытаться встроить контейнерный компонент в презентационный компонент в целом, потому что, если я смогу отделить презентационные компоненты от Redux, они станут более пригодными для повторного использования. В то же время я не знаю, как еще встроить компонент, который требует доступа к состоянию / диспетчеризации Redux, внутри любого другого компонента, имеющего разметку.