UML diagrams to represent react-redux connected components

Question

Calling UML experts for help with laying out javascript specific diagrams.

NOTE: react, Flux Architecture, react with redux experience required.

I need help with design decisions on how to represent the structure and behavior of a react app (container and children components). Using Sparx enterprise architect the target is to have standard UML design so the entire team (who many not be very familiar with the technology) can understand whats going on plus UI developers can use it for development.

After we have decided on the UML classes (React Components) we need, Containers, presentation Views and the behavior we are still struggling with:

1. It seems we need to use two diagrams for each main container to fully represent it, one for structure and one for behavior? Do we need a behavioral diagram if the design follows the conventions?

2. Should the presentation components in the structural diagram show events triggered or actions being dispatched via the passed down callbacks to props? (example, annotate operations of a Button event to onClick or the dispatch action that onClick will call) or both.

3. Can we say react actions are Signals? since they are plain js objects and state changes happen in reducers, so we need a Statechart diagram maybe?

4. Depending on above decisions, how do we reference the Store instance in diagrams (we have one store), should we reference the Store instance in all diagrams or just add a link to its class diagram?

5. Is it correct to represent Reducers --Set State--> Store as < information flow > and Store -mapStateToProps-> props as a < dependency >?

6. Can we refer to component propTypes as the class constraints or create an interface instead?

I couldn't find a good reference for a javascript app designed in UML, except some sequence diagrams to partially visualize Nodejs modules. If you got any please send them my way.

Thanks

Kinky

You are probably addressing only a very narrow set of readers with your questions. I could try to answer a few of them, but only in a general context since what you're talking about sounds like something invented by Doc Brown. – Billibilliard

Thanks for your comment Thomas, it is true I wish to see experienced fellows with ReactJs - Redux use in the enterprise responses. Your valuable answers/comments may also be helpful from Sparx point of view. – Kinky

I'll try to give a partial answer. – Billibilliard

Answer 1

As mentioned I can't speak for the J-part, but only for the general EA-part.

1. If you have conventions which are explained externally, there is no need for additional behavioral explanation (except you want to swagger with your UML knowledge).

2. Having a context diagram is always a good idea. What I do in those cases is to create a composite diagram which shows the element in the middle (eventually highlighted by a thicker border) and the related elements arranged around it.

3. Yes, you can. Create an action in EA and you are presented a menu that allows to create a Send Signal or the like.

I can't answer 4. and 5.

Billibilliard

Thanks for your answer Thomas, regarding the first point we eventually ended up delivering some conventions explained and linked it to our diagrams to avoid any kind of wobbling with generic explanations during design reviews. – Kinky