This is an implementation of Swoops store architecture in it's purest form. It's a response to redux and attempts to simplify by removing actions and reducers. Because we know what changes are made to objects we can be much more intelligent about checking equality and rerendering. Components are expected to grab objects/properties they want directly from the store, this will set up event listeners to rerender the component when those properties change.
(rerenders automatically If and only if something is removed or added to the list)
class JobList extends BaseComponent
render: ->
super()
job_ids = JobStore.getList('All', @getId())
for id in job_ids
JobItem(id: id)
class JobStore extends BaseStore
constructor(args...)
super(args...)
@_registerList('PendingJobs', (job) -> job.status == 'Pending')
(rerenders automatically If and only if a used property is changed (status, service)) currently doesn't work for nested items (i.e. job.service_location.lat)
class JobItem extends BaseComponent
render: ->
super()
job = JobStore.getWatchedObject(@props.id, @getId())
div null,
span null,
job.service
span null,
job.status
(rerenders automatically If and only if a used property is changed (status, service))
class JobItem extends BaseComponent
render: ->
super()
div null,
span null,
JobStore.get(@props.id, 'service', @getId())
In this case the component will not attempt to trigger a rerender when the user is off duty, the triggers for full_name were never set up when the user is off duty.
class UserItem extends BaseComponent
render: ->
super()
user = UserStore.getWatchedObject(@props.user_id, @getId())
div null,
if user.on_duty
"#{user.full_name} is on duty"
else
"Off duty"
triggers a rerender on any component that cares about this job
JobStore.add(job)
triggers a rerender on any component that cares about this job still a work in progress
#If you know what's changed
JobStore.update(job, [status, service]) #prefered
#If you don't know what's changed
JobStore.update(job) #depricated
class Router extends BaseComponent
constructor() ->
@refreshWatcherId = @createNewWatcher(@refresh)
ReleaseStore.getList("webReleases", @refreshWatcherId)
refresh: ->
window.location.reload()
class Router extends BaseComponent
constructor() ->
@refreshWatcherId = @createNewWatcher(@updateSearch)
@updateSearch()
updateSearch() ->
...
UserSettingStore.get(filter_id, "filters", @refreshWatcherId)
...
Considerations:
- Proxy isn't supported in IE so we have a polyfill
- Assumes you know the properties that have changed
TODO:
- Implement warnings and fallbacks (left out for clarity)
- Various optimizations can be done for performance