Как легко отделить от редукса? - PullRequest
Новая
       7

Как легко отделить от редукса?

0 голосов
/ 04 ноября 2018

Я хочу иметь возможность легко перейти из Redux (использовать другую реализацию, похожую на Flux) или повторно использовать наши компоненты 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 Ответ

0 голосов
/ 04 ноября 2018

Одна вещь, которую вы можете сделать в приложениях 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 , который стоит проверить.

...