Not Flux
What is Not Flux
It's a flux library :) Implemented in angular to provide a quick flux pattern without having to worry about using emitChange
everywhere
Features
- Actions and Stores
- Stores emit clones
- NO EMIT CHANGE!!
- Can have private functions/methods
Examples
Creating a store
.factory('SettingsStore', ['NotFlux', function(NotFlux) {
return NotFlux.createStore({
myInfo: {hello: 'world'},
userId: 4,
_privateData: 2,
_myPrivateStuff: function() {
},
modifyInfo: function(id, info) {
this.myInfo.hello = 'bill' + info
this.emit('myEvent', this.myInfo)
},
changeUserId: function(id) {
this.userId = id
}
})
}])
Creating actions
.factory('SettingsActions', ['NotFlux', function(NotFlux) {
return NotFlux.createActions([
'setUserId',
'changeInfo'
])
}])
Linking Actions to Stores
.factory('SettingsStore', ['NotFlux', 'SettingsActions', function(NotFlux, SettingsActions) {
return NotFlux.createStore({
myInfo: {hello: 'world'},
userId: 4,
init: function() {
SettingsActions.setUserId.listen(this.changeUserId)
SettingsActions.changeInfo.listen([this.modifyInfo, this.changeUserId])
},
modifyInfo: function(id, info) {
this.myInfo.hello = 'bill' + info
},
changeUserId: function(id) {
this.userId = id
}
})
}])
Linking up the view
.controller('myCtrl', ['$scope', 'SettingsStore', 'SettingsActions', function($scope, SettingsStore, SettingsActions) {
SettingsStore.bindTo($scope, function(data) {
$scope.userId = data.userId
})
$scope.onClick = function() {
SettingsActions.changeUserId(5)
}
})
Methods
Store
Outside the definition
.bindTo($scope, cb)
This is for binding to the data of a store. To modify the datastream we can use tranformFn
Inside the definition
.init
A method to overload for initialization of the store. Used to bind actions.
init: function() {
// Set `setUserId` to run store.changedUserId
SettingsActions.setUserId.listen(this.changeUserId)
// We can even define multiple handlers
SettingsActions.changeInfo.listen([this.modifyInfo, this.changeUserId])
},
.transformFn(data)
This is so you can modify the outgoing stream from the store.
IE.
NotFlux.createStore({
transformFn: function(data) {
data.userId += 500
return data
}
})
.emit(data)
Use this to emit system wide events
IE.
NotFlux.createStore({
myFn: function(data) {
this.emit('hello', data)
}
})
$scope.$on('hello', function(data) {
console.log(data)
})
Actions
Actions.{name}.listen(handler)
Setup a listener for an action