使用操作将数据从 Flux 存储返回到 React 组件答案

【问题标题】：Returning data from Flux store to React components with actions使用操作将数据从 Flux 存储返回到 React 组件
【发布时间】：2018-04-16 19:35:44
【问题描述】：

我已经为此烦恼了大约 3 天，但几乎找不到与此相关的答案。这似乎很简单，以至于我确定我错过了某些东西或以错误的方式接近它。我有一个使用 Flux 的 React 应用程序。我的存储和操作在更新和更改数据方面工作得很好，但是在通过操作从存储中检索数据并将其放入我的组件时我被卡住了。

示例商店

class DiceStore extends EventEmitter {
    constructor() {
        super();
        this.dice = [
            {name: 'purple',
             facts: PurpleDice.PurpleDice},
            {name: 'green',
             facts: GreenDice.GreenDice},
            {name: 'yellow',
            facts: YellowDice.YellowDice}, 
            {name: 'blue',
             facts: BlueDice.BlueDice},
            {name: 'black',
             facts: BlackDice.BlackDice},
            {name: 'red',
             facts: RedDice.RedDice},
            {name: 'white',
             facts: WhiteDice.WhiteDice}
        ];
    }

    getAllDice() {
        return this.dice;
    }

    handleActions(action) {
        switch(action.type) {   
            case "GET_ALL_DICE": {
                this.getAllDice();
                break;
            } 
            default: {
                break;
            }
        }
    }
}

示例操作

export function getAllDice() {
    diceDispatcher.dispatch({
        type: "GET_ALL_DICE"
    })
}

示例组件

export default class DiceHolder extends React.Component {
    constructor(){
        super();

        this.state = {
            allDice: DiceActions.getAllDice(), 
        }
    }
}

我所看到的一切都表明我不应该在不使用操作的情况下直接在商店中运行函数。但是，当我尝试使用某个操作时，商店会正确执行它的操作并可以控制台记录我需要的数据，但它只会在组件中返回未定义的。我需要重新考虑或采取不同的措施来让操作在我的组件中实际返回静态存储数据？

【问题讨论】：

标签： reactjs flux

【解决方案1】：

我看到这个已经很老了，但我会为以后的访问者试一试。

您不必发送操作来检索数据。当您更改（更新/删除/添加）数据时，就有了单向数据流的概念。

如果您想将数据从您的商店导入到您的组件，只需从您的组件中调用DiceStore.getAllDice()。

这是您当前的实现正在做的事情：

组件： -嘿调度员，通知商店GET_ALL_DICE
调度员 -这里的每个商店，GET_ALL_DICE！
商店: -啊，GET_ALL_DICE 发生了。我将在这里运行我的getAllDice() 方法，不要告诉任何其他人。

【讨论】：