Great analogy and description. When an Action causes a state change in the Store, how are the React views notified so that they can re-render themselves? In the analogy I think the views would be the scoreboard, arrangement of players on the court, whether the fans are cheering/quiet/booing, etc.
I’ve been writing an Angular.js 1.x app for the past few months, and the pattern I’ve adopted is to organize everything around components which consist of a directive, a template, and a controller. I have a top-level component that maintains the application state in its controller, and pieces of that state are passed to nested components. In this way I try to make the nested components stateless and re-usable. Your description of how you’ve been using React over the past 8 months mirrors my experience using Angular in this way.
The main problem I have is that I don’t have anything like Redux to manage state changes (each component is changing the pieces of state passed to it, via Angular’s two-way data binding).
We’re talking about re-writing this app using Angular 2 when it’s a little more mature, and I’m going to try to make the argument to use React and the Flux architecture instead.