Writing directly to stores is an anti-pattern. I might consider something like galleryActions.initialise() in the gallery constructor.
Consider a view/container design pattern to decouple the application logic (actions, state from stores) from the UI. The container has no props, but has store state that it applies to the single "view" component it is responsible for rendering. It listens to events from the view component and calls actions. This would liberate you to take something like the item component and move it to a completely different area of the CMS, used in a different context.
Probably should start thinking about some shouldComponentUpdate hooks. Although React diffs the VirtualDOM and makes minimal DOM mutations, it still takes a lot a work to calc that diff, and shouldComponentUpdate can bypass that all together, if, for instance, newProps === prevProps && newState === prevState.
One way that check can be easily defeated is through function binding in the render() method, e.g. <button onClick={this.handleClick.bind(this)}>. Every time you bind, you create a new reference to that function and therefore prevProps.onClick !== newProps.onClick every single time, defeating your shouldComponentUpdate.
Consider moving XHRs to the action layer. Things tend to scale better that way, as it becomes increasingly more likely that multiple stores will want the result of a server call.
Consider creating an API wrapper class singleton to tidy up all the jQuery.ajax.
Consider creating two action types: server and view, to manage optimistic updates and fetched data:
High level stuff
galleryActions.initialise()
in the gallery constructor.item
component and move it to a completely different area of the CMS, used in a different context.shouldComponentUpdate
hooks. Although React diffs the VirtualDOM and makes minimal DOM mutations, it still takes a lot a work to calc that diff, andshouldComponentUpdate
can bypass that all together, if, for instance,newProps === prevProps && newState === prevState
.render()
method, e.g.<button onClick={this.handleClick.bind(this)}>
. Every time you bind, you create a new reference to that function and thereforeprevProps.onClick !== newProps.onClick
every single time, defeating yourshouldComponentUpdate
.jQuery.ajax
.This definitely starts to get verbose, and I would recommend creating some factories to generate these actions.
Minor bits
var
keywords in favour ofconst
orlet
to provide some control over mutationsover
MyClass.PropTypes = {}
and
over
this.myEventHandler = this.myEventHandler.bind(this)
;