Our CEO now posts directly in his Medium account. Follow him to learn about blockchain, AI, game design and startups: https://medium.com/@ccerrato147
Hi, in this post I’ll be presenting you the front end architecture behind a ReactJS App with ReduxJS for state management. This is a very popular combination these days and the one we have invested time for a recent project.
Before going on it’s important to clarify what OData is since you will see it a lot in this blog post. Per the official page it is defined as “Open Data Protocol, an OASIS standard that defines a set of best practices for building and consuming RESTful APIs”. Many systems implement this standard and there are frameworks for the most popular languages in case you want to build your next endpoint with it. For more information go to the official web page:
The usage of ReactJS for an app provides an easy way to create views for each state in the app. Components created with ReactJS can be reusable, this way you save time and effort by sharing the components you create across multiple views.
Redux is a state container for JS apps, it keeps the application’s behavior consistently by updating the state using pure functions. This make it great to run test with easy.
The app
For this example, we’ll be talking about a Forms Webapp, which is hosted in a Sharepoint site. The application consists of a main screen where you can find all the links to the different forms you can submit. After the form is submitted another user will receive a notification to approve or decline it.
The Front End Diagram
The following diagram shows the front end code modules:
Explanation
The higher order components are the ReactJS containers, which are not visible to the user, but they hold the main components the user will be accessing. The containers provide the UI components with the state and actions they can perform.
The UI ReactJS components are the one seen by the users, they are the web interface elements like labels, textbox and dropdowns. They receive parameters, perform data access by calling the Request Module (e.g. ajax get function), send actions to the redux store to update the state, send data to be store by a OData Services (through the Request Module again).
The ReduxJS store receives actions from the UI ReactJS components, these actions contain the information passed to the Reducers. The Reducers receive the current data state, the changing data and they return the new state.
The Action Diagram is an example flow that details the actions and mechanisms for getting a submitted form:
The above example is a user getting a specific form with an ID. The UI ReactJS component is calling a get function defined at the Request Module, this functions contains the modularity to work will all the forms and organizing the data to make the request (making a very useful single functions to get data dynamically). The Request Module runs an ajax asynchronous function to the OData Services, they respond with a JSON object which is passed back to the UI ReactJS component by the Request Module after being sorted, filtered and converted to an immutableJS object. Then the UI ReactJS component updates the state and re-renders itself to be presented to the user with all the information obtained by the request.
This is it for now, hope you find the post useful.
Redux has been influenced by the architecture powered by Facebook for the applications of React.js. They go well together, like eggs and bacon.
By Alberto Cerrato — Xourse Developer
