Question

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

作为一个例子 - 我有一个简单的图表，它根据表单的更改更新x和y范围。我有一个简单的商店，从Dispatch活动更新，＆＃34; XRANGE_CHANGE＆＃34;并且＆＃34; YRANGE_CHANGE＆＃34;，一个动作。

＆＃13;

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();

＆＃13;

还有一个Container，它会将此商店传递给图表组件;

＆＃13;

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);

＆＃13;

以上评论的感叹号表示我忘记了接受＆＃34;接受＆＃34;反应的做法。我不太确定将商店传递给图表组件的最佳方式，这将决定我如何在组件中读取商店。就我看来，我有一些选择，所有工作都可能完全错误。

如上所述，我将整个商店传递给组件和组件＆＃39;渲染函数读取store.get（＆＃34; xRange＆＃34;）或store.get（＆＃34; yRange＆＃34;）
在容器中，我定义xRange = {chartStore.get（＆＃34; xRange＆＃34;）}等。
在要么容器或组件我执行store.toJSON（）/ toObject（）并直接从结果中读取。

对于任何这些场景，我都可能完全脱离标记。或者任何这些方式都可以。

任何建议都将不胜感激。随着我的继续，我想知道我正在执行合理的程序。提前谢谢。

Answer 1

正如您已经注意到的那样，这并不是一个明确的答案。但我认为这是确定＆＃34;权利的好方法。方法论是通过查看编写的图书馆和＃34; for flux＆＃34;以及他们如何处理这些问题。特别是，我将看一下Redux（一个flux实现）和Reselect（Redux的扩展，进一步解决这个问题）。

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

与流量模式中的大多数事情一样，这里的想法是提供确定的真实来源＆＃34;。您希望每个子组件以相同的方式解释通量状态，并且如果需要以不同方式计算数据，您希望有一个方法可以修改。通过将助焊剂状态的ETL放入容器中，您可以实现这一目标。如果应用程序的这一部分需要通过哪一段通量状态，您是否需要修改此calculateState方法，而不是该数据的所有较低用法。

反应+通量。优化了将商店状态传递给组件

1 个答案: