流容器函数'createFunctional‘的用途是什么？

Question

我正在做一个项目，它有一个流量模式，它使用流量容器函数"createFunctional“，如下所示：

import {Container} from 'flux/utils';
import View from './MyView.js';
import AppStore from './AppStore.js';

function getStores() {
  return [
    AppStore
  ];
}

function getState() {
  var state = {
    pie: AppStore.getState(),
  };

  return state;
}

export default Container.createFunctional(View, getStores, getState);

我想更好地理解这段代码，但是我发现很难找到关于这个函数的文档。

我猜这是在以某种方式将存储和状态函数绑定到视图，并且它在某种程度上与下面的代码(我已经基于example on the flux website重构了它)是相同的：

class MyView extends Component {
  static getStores() {
    return [AppStore];
  }

  static calculateState(prevState) {
    return {
      pie: AppStore.getState(),
    };
  }

  render() {
    return <div>blah..</div>;
  }
}

const container = Container.create(CounterContainer);

Answer 1

看一下source code，它是相当简单的。

它创建了一个容器组件。该组件订阅所有给定的存储。当存储中有变化时，它使用getState函数从存储中获取任何重要的内容。

然后将getState的结果存储在容器的this.state中。

容器的render函数简单地呈现View，将整个状态(getState的结果)作为属性传递给它。

简而言之，容器监视存储中的更改，并将它们作为属性传递给视图。这简化了组件的设计，因为它们不必处理状态和对存储的订阅。