通量容器函数“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);

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

我猜这是以某种方式将 store 和 state 函数绑定到视图，并且它在某种程度上与此代码相同（我已根据 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 的结果）作为属性传递给它。

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