This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

Manage State of The Symfony Rating dashboard Application With MobX

Updated on  17th October

12 Min Read
Symfony dashboard
Reading Time: 12 minutes

If you have been using Symfony for sometime, then you probably know about developing web applications in a traditional way, where the framework basically handles everything, from routing to state management, page rendering and various other operations. However, modern web developers are taking a different approach for developing new applications.

It means, web applications now demand lot of user interactions which can sometimes be complex. This is where single-page applications take the lead. Rather than loading a new page each time from the server, your website can interact with users by dynamically rendering contents without refreshing the page. This contributes immensely to the conversion rate and success of a web application. Meanwhile it is also important to put state management into consideration.

If you want to develop a Symfony dashboard application in which Symfony will be powering the backend and  frontend would be handled using React, then you should consider using MobX to manage the state of your data.

What we will build

In this article, we will explore MobX by developing a simple product review and rating system. Take a look at the image below:

With this Symfony dashboard application, a user can write a short review, select the number of star ratings and then submit the review. We will go further by creating a page for the admin area, where the administrator can see the complete list of reviews submitted, and the total number of stars for all products by different users.

To keep things simple, there won’t be any need to implement authentication and authorization. The main objective is to be able to maintain the state of the application from one page to another using MobX.

What is state management

State of an application determines the contents which need rendering. It is the current available value that you use through the reusable components in your application irrespective of the size. Naming as global state, it provides, maintains and makes available data which is easily accessible from anywhere, by any component within the application.

It is quite inevitable to use this approach especially for large scale applications. This is where a state management library like MobX really comes in handy. Needless to say that, apart from global state, a state management pattern should also use Component state , Relative state, and Provided state.

Prerequisites

This tutorial requires the knowledge of React, Object Oriented Programming with PHP and familiarity with building applications using Symfony. Do ensure that you have Node.js and Yarn package manager installed on your system.

Why MobX

MobX is a simple and scalable state management library used to hold data especially in React applications. It is gradually gaining popularity in the React community and might be a contender for Redux in a few years to come. Amongst other features, it gives you an opportunity to define a central location (store) for your data.

With MobX, you can define the state of any data structure you prefer to use within your application like; objects, arrays, classes and make them observable. Being observable means that your defined data will remain under observation and will automatically update within the review whenever any state change occurs. Check the official documentation for more information.

Installing and setting up Symfony

We will name our Symfony dashboard application as symfony-react-mobx. In order to quickly set it up, we will use composer. Alternatively, launch a server by signing up for free on Cloudways PHP hosting and follow the tutorial to set up a Symfony 4 project in just a few minutes.

For now, we will use the command below to create the project and install all its dependencies:

Once the installation process is complete, go to the next section and create a controller.

Create controller

Create a simple controller for the application using:

Open the newly created DashboardController and paste the following:

This is what is obtainable for a typical Symfony controller. But what is, however different here, is the usage of an additional parameter {reactRouting} to the URL within our controller. For this application, we will use React Router to navigate between the homepage and admin. In order to avoid Symfony from intercepting the route and make AJAX routing accessible directly from the URL, we have included a routing parameter.

Setup template for the application

A template has already been generated by Symfony. You can locate the file in ./templates/dashboard/index.html.twig and replace its content with:

The mounting of our application will be made on an HTML div element with the root ID above. The file will basically render it for the users.

Update the base template

Next, update the base template with the following:

Install React and other dependencies

Let’s set up React using Webpack Encore.

Installing MobX

For installing MobX, use yarn to install the library and an additional tool for utilizing it with React:

Other dependencies

In addition, install the dependencies mentioned below as well:

Here are the details of the component installed above:

Setting up Webpack Encore for React

Here, we are navigating to ./webpack.config.js to configure Webpack Encore and enable React in our application. Edit the file as shown below:

Finally you must create a subdirectory named js within the assets folder and then add an app.js file within it.

Setting up MobX store

Create a subfolder within the ./assets/js and name it stores. Next, create two new files called index.js and Reviews.js within the newly created folder. Open Reviews.js and paste the content below in it:

The file mentioned above shows how a typical MobX store looks like. It is basically a JavaScript class that holds the state of data in your application. The data in focus here is the reviewList[] array, by default we have passed a single object containing a review and a star count. Meanwhile our application does not require it much, its just to avoid having an empty list to start with.

We will use MobX to update this list through actions denoted by the @action decorator. Then we will also retrieve data from the reviewList through the computed properties. This is part of the major concepts of MobX which are Observable,  Computed,  Actions,  Reactions.

We will use addReview action to push new reviews into the reviewList. This will mutate the list and update it with the new ones. Next up, there are a couple of computed values for deriving the reviewCount, totalStarCount and averageStarCount.

Next, open the index.js file and paste this:

Creating application components

Create a components directory for the application within ./assets/js folder and start by setting up the component for the review form.

The review form component

We will render this component on the homepage of our demo. To start, create the file for it within the components folder and name it as ReviewForm.js. Open the file and add the following content:

Here, in this file we are importing and using the @inject decorator to inject the reviews store into the form component. This gives us the ability to call the addReview action from our MobX store and mutate the state of the reviewList.

Lastly, we can now proceed to setup our form inputs and create a function to handle the form submission.

The admin component

The admin page will display the total list of reviews and other computed values from our MobX store. Create this file within the components folder and name it Admin.js:

We are importing two different components that we will create soon, injected the reviews store and finally pass the store as a props down to the children components of our admin page.

Reviews board component

Create a file for the reviews board, name it ReviewsBoard.js and paste the code mentioned below in it:

Above, we are accessing the store passed down to this component as a props and rendering the reviewCount, totalStarCount, averageStars count respectively.

Reviews list component

Next is the reviews list. Create this file ReviewsList.js and add the following code to it:

We basically loop through the reviews list from our MobX store and render it using the List component.

The list component

Lastly, create the list component List.js and paste the following code within it:

Updating the main component

Open up ./assets/js/app.js which happens to be the entry point to our application and add the following contents:

In order to make our review store available throughout all the components, we have used a Provider component imported from mobx-react. This is very important as without it, the review store will not be available for all other components and MobX will throw an error.

We also set up the route path and passed the necessary components to it.

Test the application

It’s time to test the application. Open your terminal within the project directory and run the command below to start the development server:

Once the process mentioned above is complete, open another terminal and compile the React application using Webpack Encore by running:

Now, navigate to http://localhost:8000/ from your favorite browser, you should see this:

Try it out by writing a review, select any preferred number of stars from the dropdown and click on the SUBMIT YOUR REVIEW button.

Next click on the Admin page link from the navigation menu:

That is it. We have successfully implemented state management in our Symfony React application using MobX

Wrapping up!

We have seen how to handle routing by using React Router, maintain the state of application with MobX and how easy it is to combine Symfony and React together.

MobX is generally available for use and quite compatible with any other JavaScript libraries or framework. It is just more popular within the React community. Kindly share your thoughts and other issues in the comment section below.

Check here on GitHub for the complete source code for this demo.

Share your opinion in the comment section. COMMENT NOW

Olususi k Oluyemi

A tech enthusiast, programming freak and a web development junkie who loves to embrace new technology.

Create PHP websites without the worry of server management.

Deploy your PHP app on optimized PHP hosting servers.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.