Question

我希望能够轻松地从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 {
  // ...
}

Answer 1

在Redux应用程序中可以做的一件事是将连接的（容器）组件与表示性组件分开。 Redux的作者Dan Abramov在此模式here上有一篇很棒的文章。总结起来，您无需使用Redux就可以构建演示组件。它通过道具获取数据，并通过回调道具（例如this.props.onNeedData()）请求数据。在您的示例中，您的Dashboard组件已经接近于演示组件。您可以通过使用mapDispatchToProps来传递fetchProjects函数作为回调道具，以进一步完善它。您可以阅读有关mapDispatchToProps参数here的更多信息。此外，我会听从Dan的建议，首先连接顶级组件，然后通过props向下传递数据/回调，直到变得难以管理并且您需要连接其他组件为止。这将有助于最大程度地减少您的代码对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是因为您已经评估了Redux的成本和收益，并认为这对您的项目是有利的？网上有很多React教程，似乎没有Redux或某些状态管理就无法构建React项目，但是React的状态管理非常出色。实际上，丹·阿布拉莫夫（Dan Abramov）的文章标题为You Might Not Need Redux，值得一看。

如何轻松地从Redux解耦？

1 个答案: