Флюс для инициализации Магазин

Question

Доброе утро, все!

У меня есть компонент Component (вид), который зависит от Магазина, который, в свою очередь, зависит от того, что какое-то состояние вытащили из кругового путешествия на сервер.

Что я хочу понять, если существует общий шаблон для инициализации состояния магазина.

Прямо сейчас я думаю, что я хотел бы сделать что-то вроде:

var SomeView = React.createClass({ 
    componentWillMount: function() { 
    SomeStore.addChangeListener(this._onChange); 

    // Go and tell this thing we want to initiliaze our 
    // state ahead of time. My worry here is obviously 
    // that when state is updated this fires again so I'd 
    // need to have some knowledge that the store has been 
    // initialized which seems very (very) kludgey 
    SomeActions.init(); 
    }, 

    render: function() { 
    // Here i'd want to see if I had items available for 
    // rendering. If I didn't I'd drop on a loading dialog 
    // or if I did I could render the detail. 
    }, 

    _onChange: function() { 
    // this.setState... 
    } 
}); 


var SomeActions = { 
    init: function() { 
    AppDispatcher.dispatch({ 
     actionType: SomeConstants.INIT 
    }); 
    } 
}; 


var SomeStore = assign({}, EventEmitter.prototype, { 
    init: function() { 
    $.get('/round/trip', function(data) { 
     this.emitChange(); 
    }).bind(this); 
    } 

    emitChange: function() { 
    this.emit(CHANGE_EVENT); 
    }, 

    addChangeListener: function(callback) { 
    this.on(CHANGE_EVENT, callback); 
    } 
}); 


AppDispatcher.register(function(action) { 
    switch(action.actionType) { 
    case SomeConstants.INIT: 
     SomeStore.init() 
     break; 

    default: 
    } 
}); 

Я абсолютно уверен, должно быть лучше.

Answer 1

Мое беспокойство здесь, очевидно, что, когда состояние обновляется этот раз срабатывает

componentWillMount срабатывает один раз компонент впрыскивается в DOM, обновления состояния не будет срабатывать этот метод. Однако, если вы удаляете компонент из DOM (например: не визуализируя его в родительском компоненте на основе какого-либо условия) и позже его выносите, метод будет запущен снова. Таким образом, init будет вызываться несколько раз в магазине.

Я считаю, что вы должны переместить код HTTP-запроса в модуль веб-API и запустить действие API с помощью метода componentWillMount, тогда API запустит хранилище и запустит событие change на компоненте, визуализации. Вот как работает Flux.

Если вам нужно получить данные только один раз, и вы знаете, что ваш компонент будет удален из/добавлен в DOM несколько раз, вы должны поместить вызов api в верхний компонент в дереве (компонент, который представляет запись указать на виджет или что-то еще).

Я рекомендую проверить Component Container или шаблон компонентов более высокого порядка, который в основном определяет тонкий компонент оболочки как слой данных над компонентом представления. Таким образом, вы можете полностью отделить свои взгляды от уровня данных, и он работает хорошо.

Вы также можете проверить другой подход, исходящий от Omni ClojureScript, с одним неизменным состоянием. Это упрощает все еще больше и на самом деле лучший способ, который я нашел для себя, для создания приложений с помощью React. Я создал a starter kit для этого, есть хорошее объяснение основных понятий в readme.