I tried connecting the repository to the response component defined through React.createClass. I have reached a global state, but I need a lot of re-factoring.
I will share the appropriate code and continue with questions after that.
Actions
var Reflux = require('reflux');
module.exports = Reflux.createActions(['markAllRead']);
Score
var Reflux = require('reflux');
var StoreActions = require('../actions/storeActions/notifications');
var React = require('react');
module.exports = Reflux.createStore({
init: function(){
this.listen(StoreActions.markAllRead, this.markAllRead);
this.state = {
unreadCount: 5
};
},
markAllRead(count){
this.state = {
unreadCount: 1
};
this.trigger(this.state);
}
});
Header component
var notificationsStore = require('../stores/notifications');
getInitialState: function() {
return {
notificationsData: this.props.notificationsData,
state: {},
store: notificationsStore
};
},
Inside the render function
<div onClick={this.toggleNotifications} className='bell' id='bell'>
<Glyphicon glyph='bell' id='bell'></Glyphicon>
{
this.state.store.state.unreadCount > 0 ?
<span className='notBadge' id='bell'><span id='bell'>{this.state.store.state.unreadCount}</span></span>
: null
}
</div>
<div id='notificationsPanel' className='notificationsPanel'>
<NotificationsList list={this.state.notificationsData.notifications} clickHandler={this.clickHandler}/>
<div className='footer notification_bar'>
<span className='pull-left'><a onClick={this.seeAll}>See all</a></span>
<span className='pull-right'><a onClick={this.markAllRead}>Mark all as read</a></span>
</div>
</div>
... ...
updateReadStatus: function(){
notificationsStore.markAllRead();
},
markAllRead: function(){
ActionsNotifications.markAllRead().then(this.updateReadStatus);
},
In the function, updateReadStatus
I call the store (markAllRead) method manually. What is the right way to trigger an action since I'm already listening to them in the store?
-, this.state.store.state.someVariable
. getInitialState
, - this.state.someVariable
? , getInitialState, constructor() {}, , createClass()
!