Возврат данных из хранилища Flux в компоненты React с помощью действий

Я занимаюсь этим уже около 3 дней и могу найти очень мало ответов, связанных с этим. Это кажется достаточно простым, и я уверен, что что-то упускаю или подхожу к этому неправильно. У меня есть приложение React, использующее Flux. Мой магазин и действия прекрасно работают для обновления и изменения данных, но я застрял, когда дело доходит до извлечения данных из хранилища с помощью действий и их передачи в мой компонент.

Пример магазина

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(), 
        }
    }
}

Все, что я вижу, говорит о том, что я не должен запускать функции в магазине напрямую, не используя действие. Однако, когда я пытаюсь использовать действие, хранилище делает свое дело правильно и может консольно регистрировать нужные мне данные, но всегда возвращает неопределенное значение в компоненте. Что мне нужно переосмыслить или сделать по-другому, чтобы действия действительно возвращали статические данные хранилища в моем компоненте?


person Logan Shoemaker    schedule 04.11.2017    source источник


Ответы (1)


Я вижу, что этот довольно старый, но я попробую его для будущих посетителей.

Вам не нужно отправлять действие для получения данных. Концепция однонаправленного потока данных используется, когда вы изменяете (обновляете/удаляете/добавляете) данные.

Если вы хотите импортировать данные из своего магазина в свой компонент, просто вызовите DiceStore.getAllDice() из вашего компонента.

Вот что делает ваша текущая реализация:

Компонент: -Эй, диспетчер, проинформируйте магазины GET_ALL_DICE
Диспетчер -Все магазины поблизости, GET_ALL_DICE!
Магазин: -Ах , GET_ALL_DICE произошло. Я просто запущу свой метод getAllDice() прямо здесь и больше никому ничего не скажу.

person Espen Bjørkeng    schedule 20.02.2018