Using Sinux with React

Sinux is Facebook a Flux implementation. Flux is an architecture that support React philosophy.

Let's see how to use Sinux with a React application.

Project architecture

As you know, Sinux is inspired by RobotLegs framework (AS3) that share lot in common with React.

RobotLegs is using the mediator design pattern, which includes the logic and computation as well as defines the interface for communication between objects. In RobotLegs it would be nice if I can somehow set the view to be completely passive so it will only include the view and what’s related to the view. The view will than include:

• State
• Transitions
• Components and sub-components

What I would prefer to do is set the mediator to include all the logic and data so I can leave the view “clean” of logic and data. For instance, let’s say I want to implement the preinitialize I would implement that logic in the mediator and not in the view.

http://knowledge.robotlegs.org/discussions/suggestions/6-presentation-model-vs-mediator-design-pattern

In the same way React say :

In React, an owner is the component that sets the props of other components. More formally, if a component X is created in component Y's render() method, it is said that X is owned by Y. As discussed earlier, a component cannot mutate its props — they are always consistent with what its owner sets them to. This fundamental invariant leads to UIs that are guaranteed to be consistent.

It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM.

https://facebook.github.io/react/docs/multiple-components.html

So in react their is two kind of components, components that own the logic and components that own the display.

Let's called component that own the display a View component. View Component must be decoupled with data. They should ignore anything about business logic. In this way View Components are inter-changeable. View components are in charge of displaying data and listening for user interaction. When a user interaction is catch by the View component, this one is transfer to the owner component.

In an other hand, let's called owner components a Container. Containers are in charge of managing business logic and data. Container pass those values to View components to compose the view.

This separation of concern is the Presenter Model.

React implementation of Presenter Model

We will now create a todo application that use Presenter Model and Sinux. This application is write in React Native but can be ported to React in changing components.

Folder structure

This proposed architecture do not contain react native boilerplate. Let's create those folders and file in the generated app folder.

- src
  - components
    - TodoList.jsx
    - TodoItem.jsx
    - TodoForm.jsx
  - stores
    - todoStore.js
  - containers
    - TodoApp.jsx
  - styles.js

I use here distinction between React component (jsx) and Javascript file (js) to clarify the scope of each file.