SomeDude SomeDude - 1 year ago 69
React JSX Question

Do I understand this MVC right?

I'm refactoring a large web app with another developer's help. In my mind, the backend is organized like so:

Symfony PHP: controller
PostgreSQL DB: model

As I understand it, the client-side browser is the 'view' of the server.

The frontend is additionally organized like this:

Redux.js: model + controller // this is all mildly simplified
React.js: view

Is it, therefore, conceptually correct to consider the client-side browser as the view of the server's state, and further, that the browser maintains its own state, controller, and view of the server-side data?

I'm a server-side "expert" (emphasize the quotes), while my helper is a front-end pro. We're deliberately trying to separate frontend and backend and restrict interaction to JSON payloads beyond the initial page load. If I'm looking at the global organization of the project right, it'll really help me organize our master codebase.

Answer Source

I don't think it's particularly helpful to think of the client-side app as just a view of the server-side state anymore.

The client-side is its own MVC application. Strictly, I don't think react-redux is actually MVC. It's considered an alternative to MVC. React is the View in MVC, but also a little bit of the Controller, and redux is an opinionated way of using the Model. You should read more here:

Relationship of the client-side M to the server-side M

Maybe another way of thinking about this is that the server has a 'model' and a part of the redux state-tree is actually a view of that 'model' (like a list of todos derived from and kept in sync with a todo table on the server-side).

Parts of the redux state-tree could also have nothing to do with the server-side 'models' and could just be useful for storing client-side state (like the current url/route).

My firm belief is to not worry too much about the terminologies too much and stick to first principles. The server has state, the client-app has state. A part of the client-app's state is derived from and/or synced to the server-side state. The rest of the client-app's state help's generate the UI that the user sees. As the user interacts with the app, code is triggered that manipulates the state. Once you write a simple react-redux app, you'll see where all these pieces go!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download