反应+助焊剂。优化将存储状态传递给组件的过程

Question

我对 React/Flux 体系结构的某个方面有一点概念上的困难，我知道，疯了，对吧。它与 Container 应如何将 Store 传递给 Component 以及 Component 应如何从 Store 读取有关，据我所知，它们是相互依赖的。

举个例子 - 我有一个简单的图表，它根据表单的变化更新 x 和 y 范围。我有一个简单的商店，从一个动作的调度事件 "XRANGE_CHANGE" 和 "YRANGE_CHANGE" 更新。

import Immutable from "immutable";
import { ReduceStore } from "flux/utils";
import Dispatcher from "../Dispatch";

class ChartStore extends ReduceStore {
    constructor() {
        super(Dispatcher);
    }
    getInitialState() {
        return Immutable.OrderedMap({
            xRange: [],
            yRange: []
        });
    }
    reduce(state, action) {
        switch(action.type) {
            case "XRANGE_CHANGE":
                return state.set("xRange", action.item);
            case "YRANGE_CHANGE":
                return state.set("yRange", action.item);
            default:
                console.error("Action type not found");
                return state;
        }
    }
}
export default new ChartStore();

还有一个 Container，它将把这个 Store 传递给 Chart 组件；

import React from "react";
import { Container } from "flux/utils";
import ChartAction from "./ChartAction";
import ChartStore from "./ChartStore";
import Chart from "./Component";

class ExampleContainer extends React.Component {
    static calculateState() {
        const chartStore = ChartStore.getState(),
            xRange = chartStore.get("xRange"),
            yRange = chartStore.get("yRange")
        return {
            xRange: xRange,
            yRange: yRange,
            xChange: ChartAction.xChange,
            yChange: ChartAction.yChange
        };
    }
    static getStores() {
        return [ChartStore];
    }
    render() {
        const state = this.state;
        return <Chart
                // actions
                xChange={state.xChange}
                yChange={state.yChange}
                // !!!!! here's where my confusion lies !!!!!
                //store={state.chartStore}
                // ammended
                xRange={state.xRange}
                yRange={state.yRange}
            />
        </div>;
    }
}
export default Container.create(FinanceContainer);

上面评论的感叹号表明我在哪里忘记了 "accepted" React 的做事方式 things.I 不太确定将商店传递给图表组件的最佳方式，这将指示我如何读取组件内的商店。据我所知，我有几个选项，所有选项都有效，但可能完全错误。

如上所述，我将整个商店传递给组件，并在组件的渲染函数中读取 store.get("xRange") 或 store.get("yRange")
在Container中我定义了xRange={chartStore.get("xRange")}等等
在容器或组件中，我执行 store.toJSON()/toObject() 并直接从结果中读取。

对于这些场景中的任何一个，我都可能完全偏离目标。或者这些方法中的任何一种都可以。

如有任何建议，我们将不胜感激。当我继续时，我想知道我正在执行一个合理的程序。提前致谢。

Answer 1

正如您所注意到的，这不是一个明确的答案。但我认为确定 "right" 方法的一个好方法是查看编写 "for flux" 的库以及它们如何处理这些问题。特别是，我会看一下 Redux（一种 flux 实现）和 Reselect（进一步解决这个问题的 Redux 的扩展）。

这些库使用的模式本质上是您的 calculateState 方法应该将通量状态转换为该容器的相关状态信息。它应该获取相关信息（例如 state.get('xRange')），如果有帮助（例如 range: {x: state.get('xRange'), y: state.get('yRange')}），还可能对状态中保存的数据执行转换。

与通量模式中的大多数事物一样，这里的想法是提供一个明确的 "source of truth"。您希望每个子组件以相同的方式解释通量状态，并且如果需要以不同方式计算数据，您希望有一个单一的方法来修改。通过将通量状态执行 ETL 到容器中，您可以实现这一点。如果您的应用程序的这一部分需要更改哪部分通量状态，您将来应该需要修改此 calculateState 方法，而不是对该数据的所有较低使用。

反应+助焊剂。优化将存储状态传递给组件的过程

React + Flux. Optimised proceedure for passing store state to component

javascript

reactjs

flux

immutable.js