Question

我现在已经在这里停留了大约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(), 
        }
    }
}

我所看到的一切都说我不应该直接在商店中运行功能而不使用动作。但是，当我尝试使用某个操作时，商店会正确地执行操作，并且可以控制记录我需要的数据，但它只会在组件中返回undefined。我需要重新思考或采取不同的方式来使操作实际返回组件中的静态存储数据？

Answer 1

我看到这个很老了，但我会试试未来的访客。

您无需向检索数据发送操作。当您更改（更新/删除/添加）数据时，就会出现单向数据流的概念。

如果您要将商店中的数据导入到您的组件，只需从您的组件中调用height即可。

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

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

使用操作

1 个答案: