Я пытаюсь реорганизовать свое приложение для разделения презентационных и контейнерных компонентов. Мои компоненты контейнера - это всего лишь компоненты, связанные с вызовами connect()
от реакции-редукта, которые отображают состояния и создатели действий в реквизитах презентационных компонентов.
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 внутри любого другого компонента с разметкой.