Как легко отделиться от редукции?
Я хочу иметь возможность легко переходить от Redux (использовать другую реализацию, похожую на поток) или повторно использовать наши компоненты React для создания динамических представлений, какое различие мне следует делать и как я могу реализовать эту идею? Для иллюстрации вы можете использовать класс Dashboard.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
// fetches projects from a remote server using Redux actions
import { fetchProjects } from '../../ducks/projects';
export class Dashboard extends Component {
static propTypes = {
dispatch: PropTypes.func.isRequired,
isFetching: PropTypes.bool.isRequired,
projects: PropTypes.array.isRequired
};
// Voluntarily obfuscated
componentXXX() {
this.fetchData();
}
fetchData() {
const { dispatch, status } = this.props;
dispatch(fetchProjects({ status }));
}
render() {
const { isFetching, projects } = this.props;
return <ProjectsPane projects = {projects} isFetching = {isFetching} />;
}
}
function mapStateToProps(state) {
const { isFetching, projects } = state;
return {
isFetching,
projects
};
}
export default connect(mapStateToProps)(Dashboard);
export class ProjectsPane extends Component {
// ...
}
Ответы 1
Одна вещь, которую вы можете сделать в приложениях Redux, - это отделить ваши подключенные (контейнерные) компоненты от презентационных компонентов. У Дэна Абрамова, автора Redux, есть отличная статья об этом шаблоне здесь. Подводя итог, вы создаете свой презентационный компонент, не зная Redux. Он получает данные через реквизиты и запрашивает их через реквизиты обратного вызова (например, this.props.onNeedData()). В вашем примере компонент Dashboard уже близок к тому, чтобы быть презентационным компонентом. Вы можете пойти немного дальше, используя mapDispatchToProps для передачи функции fetchProjects в качестве опоры обратного вызова. Вы можете узнать больше об аргументе mapDispatchToPropsздесь. Кроме того, я бы последовал совету Дэна и начал бы с подключения компонента верхнего уровня и передачи данных / обратных вызовов через реквизиты, пока это не станет менее управляемым, и вам нужно будет подключить другие компоненты. Это поможет свести к минимуму объем вашего кода, который знает о Redux.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
// fetches projects from a remote server using Redux actions
import { fetchProjects } from '../../ducks/projects';
export class Dashboard extends Component {
static propTypes = {
dispatch: PropTypes.func.isRequired,
isFetching: PropTypes.bool.isRequired,
projects: PropTypes.array.isRequired
};
// Voluntarily obfuscated
componentXXX() {
this.fetchData();
}
fetchData() {
const { onNeedData, status } = this.props;
onNeedData({ status });
}
render() {
const { isFetching, projects } = this.props;
return <ProjectsPane projects = {projects} isFetching = {isFetching} />;
}
}
function mapStateToProps(state) {
const { isFetching, projects } = state;
return {
isFetching,
projects
};
}
const mapDispatchToProps = {
onNeedData: fetchProjects
};
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);
Также стоит оценить свой проект и решить, действительно ли вам нужен Redux. Вы используете Redux, потому что оценили его стоимость и преимущества и увидели, что это будет положительно для вашего проекта? Многие учебники по React в Интернете создают впечатление, будто вы не можете создать проект React без Redux или некоторого управления состоянием, но управление состоянием React довольно хорошо из коробки. На самом деле, у Дэна Абрамова есть статья с названием Вам может не понадобиться Redux, которую стоит проверить.
Это зависит от ситуации. Если для вашей выборки не требуются какие-либо реквизиты или состояние в качестве параметров (например, получение значений раскрывающегося списка), вы можете поместить их один раз в componentDidMount. Если вам нужно автообновление, вы можете использовать setInterval, а затем clearInterval в componentWillUnmount. Если вам нужно обновлять данные в любое время при изменении свойств / свойств (например, компонент User с опорой userId), тогда вам понадобятся componentDiMount и componentDidUpdate для обработки изменений состояния / свойств. Если он основан на некотором входном значении (например, поиске с опережением), вы также должны использовать противодействие, чтобы предотвратить много бесполезных выборок.
не можем ли мы улучшить вышеупомянутый компонент Dashboard, чтобы отделить redux помимо mapDispatchToProps?
Самый независимый способ сделать это - подключить только компонент самого высокого уровня (корневой) и просто передать props полностью вниз. Тогда у вас есть только один компонент, который знает о Redux. Это связано с необходимостью передавать все больше и больше свойств по мере роста вашего приложения и снижать производительность в определенных ситуациях. Если вы хотите использовать Redux или любое другое внешнее управление состоянием, ваши компоненты должны знать об этом в какой-то момент. Вы можете попытаться абстрагировать функцию connect в своей собственной «оболочке» для нее, но она, вероятно, будет слишком специфичной для Redux, чтобы служить своей цели.
Спасибо, но какой метод жизненного цикла использовать для получения данных в этом случае?