After a new days recognition of React and Redux to create a reliable scaffolding of my application, I can present the first version of architecture and how I am gonna managing the whole application states. I’ve managed and implement the first boilerplate of my application, which I will grind over small pieces of components.

I will use the react-redux to have control of state of my application, middleware to manipulate action before it hit to the reducers, which actually will to update state and inject to the application. The second libraries will be axios to manage the AJAX request.

Going further, I am going to present the application overview in the small mockup, how it is going to look like. On the left-hand side, we will have panels with the all features of Panel Admin, at the top, it is going to be a header, and the window with the dashboard. To the style, I will use the prepackaged library like Bootstrap or something similar.

Let’s write more from developer side about the actual code. I initial the application and create some skeleton with react-redux included. The project is divided into small pieces everyone has their own role. In folder /src there are already the whole files to the application. I am going explain the task of architecture files based on all React-Redux recommendation.

  • action – the only place where we actually will use our library axios to communication with API using ajax request. In this file, we will keep our function to make the API request.
  • container – place wherever we need to get access to the redux state to get access to it all data.
  • component – place where going to be getting it’s data from parents
  • reducers – place where we decided what action we already received (usually use switch function), go pass through it and returning the new state.

I also decided to included to this project the Middleware to my project to cooperation with react-promise what is returned from axios.request as a promise. The diagram underneath present the actual application design diagram. I tried to explain everything on this diagram to show actual cycle of manage action.

 

So, it is for the beginning. Let me know what you think about the whole idea of the project initialization. In the coming post, I will step-by-step will implement the whole functionality and add also the missing features.

You can see the actual skeleton of aplication by cloning the repository on my GitHub profile.

Patyk Huzarski

Freelance web developer, addicted to computer engineering.