Правильный способ инициализации данных

Каков правильный способ инициализации данных (асинхронно) с помощью RefluxJS? Есть ли что-то похожее на решения AngularJS, или реализация Flux не имеет к этому никакого отношения (маршрутизатор должен нести эту ответственность)?


person srph    schedule 18.01.2015    source источник


Ответы (2)


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

Например:

// Create an async action, that will request data using a promise
// Using the recently released (v0.2.2) helpers for async actions
var actions = Reflux.createActions({
    init: {asyncResult: true}
});
actions.init.listenAndPromise(promiseToGetData);

// Update the store when the init action's promise is completed
var store = Reflux.createStore({
    listenables: actions,
    onInitCompleted: function (data) { 
        // do stuff 
        this.trigger(data)
    }
});

var App = React.createClass({
    mixins: [Reflux.connect(store)],
    componentWillMount: function () {
       // When this component is loaded, fetch initial data
       actions.init()
    }
});
person Matti John    schedule 23.01.2015
comment
Просто вопрос: если я использую refluxjs с реактивным маршрутизатором, что произойдет, если обещание будет отклонено; Монтаж остановлен (технически ничего не происходит) или выполняется вручную? - person srph; 23.01.2015
comment
Компонент по-прежнему будет монтироваться, призыв к действию — выстрелить и забыть. Если обещание отклонено, хранилище все равно получит результат, и вы можете добавить обработчик onInitFailed. Подробнее об асинхронных действиях см. на странице github.com/spoike/refluxjs#asynchronous-actions. . - person Matti John; 23.01.2015
comment
Спасибо. Кстати, вы имеете в виду componentWillMount, а не onComponentWillMount? - person srph; 23.01.2015
comment
ой, извините, это componentWillMount, я исправлю ответ - person Matti John; 23.01.2015
comment
В этом фрагменте кода есть как минимум пара проблем, которые на некоторое время сбили меня с толку. Во-первых, componentWillMount ожидает функцию. Кроме того, должно ли actions.load.listen... быть actions.init? - person Alex York; 12.03.2015
comment
@AlexYork, ты прав, я написал это довольно поспешно. - person Matti John; 12.03.2015
comment
Это неправильно. Он не использует API, который есть у Reflux из коробки. Смотрите мой ответ ниже. - person wle8300; 01.08.2015
comment
Нет, это не неправильно. Это способ, рекомендованный документацией React. Вы не должны делать асинхронные запросы в getInitialState. - person Matti John; 03.08.2015

На самом деле у Reflux есть API для этого.

Документы плохо описывают это, но Spoike (автор Reflux) дал ответ вместе с примером кода:

https://stackoverflow.com/a/28984512/1775026

person wle8300    schedule 01.08.2015
comment
Этот вопрос касался асинхронной выборки данных. Reflux устанавливает метод хранилища getInitialState для компонентов React и не должен использоваться для асинхронной выборки данных. Пример в ответе, на который вы ссылаетесь, предназначен для статических значений. См. официальную документацию по React и stackoverflow.com/questions/26615307 - person Matti John; 03.08.2015