Question

我知道redux非常适合处理应用程序的全局状态，并且当更新该状态以反映视图中的状态时。但是，是否可以在不应该重新渲染的反应组件上使用它？我有一个使用传单而不是重新渲染和绘制数据的地图，我希望它能够在不重新渲染的情况下绘制数据。

redux似乎是个不错的选择吗？如果是这样，我会在哪里处理api调用，因为我被告知它不应该在减速器中完成。

目前我的应用程序包含一个导航栏，一个全屏地图和一个从api请求填充的搜索菜单。我们的想法是，当选择搜索时，它会将数据填充到地图上。

Answer 1

您能否分享一下如何使用Leaflet和React而不使用Redux？

本质上，如果React组件的状态发生变化，它们将始终重新呈现，因此您可以拥有可在每次更改时更新的React组件，或者在每个订阅状态更改时更新的Redux连接组件。两种方式都没有区别。

如果您希望React / Redux能够意识到＆＃39;您的传单小部件，唯一的方法是让它在更改时重新呈现。请记住，“渲染”＆＃39;函数不会丢弃并重建DOM的那一部分，因此重新渲染每个更改都不会导致您的传单组件被销毁和重建。

您可以连接Redux调度程序而不是状态，以便您可以通过redux将更改发布到服务器，但不能连接状态。这似乎不是理想的使用方法。

另一种方法是拥有一个持久的MapCoordinates＆＃39;仅在用户确认其选择时设置的属性，而不是每次更改时设置的属性。这样重新渲染只发生在他们锁定变化时，而不是每次小调整。

为了进行API调用，您将要使用redux thunk和中间件。有很多关于这方面的信息：）

Answer 2

如果您的组件没有重新渲染，那么我建议不要将它与Redux复杂化。听起来你只需要一个管理自己渲染的组件。

var MyMapComponent = React.createClass({
  componentWillMount: function() {
    fetch('/some/data')
     .then(this.update);
  },
  update: function(data) {
    // calling setState will trigger shouldComponentUpdate
    this.setState({ data: data });
  },
  loadMap: function(container) {
    // calling setState will trigger shouldComponentUpdate
    this.setState({
      map: L.map(container)
    });
  },
  shouldComponentUpdate: function(nextProps, nextState) {
    var map = this.state.map;
    var data = this.state.data;

    // make updates to map here

    // prevent react from re-rendering this component
    return false;
  },
  render: function() {
    // pass a reference to the dom node out to loadMap
    return (
      <div ref={this.loadMap}></div>
    );
  }
});

Redux用于映射应用程序

2 个答案: