Programming

How To Set Up An ReactJS Redux Project

How To Set Up An ReactJS Redux Project

Nice to see you again on this blog for developers! React and Redux are firmly established in web application development. But their popularity also has a downside – over the years, dozens of application templates, hundreds of articles with best practices, thousands of comments and discussions have been created. How to create something unique and correctly created? Let’s try to understand together what Redux is and why it is needed, the structure of such projects and how to set up them. Let’s start!

What is Redux and why is it needed? If you have ever dealt with a large JavaScript application, especially a React application, then you know how difficult it is to keep track of the current state, when and what blocks are being rendered or why they are not rendered, where the data comes from that changes the current state, and other things. Although it seemed that take React and everything is easy.

Of course such a framework as ReactJS is very simple, but for competent and comfortable development you have to study a lot on it. Today Redux is practically a must-have for all React applications. React was developed in the depths of Facebook because they got tired of developing interfaces in a complex way and so they wrote such a library for themselves. Then they realized that it is very difficult to monitor the data, it is very difficult to monitor the state, and they crafted a concept called Flux.

This is not a framework or a library, but rather a set of patterns or just guidelines for developing React applications. It helps you manage your data flow. If we consider Flux, then its basic concepts are such things as Action, Dispatcher, Store / State and View. The basic idea of Flux is very simple: since we have problems with the data flow, we need to control this flow. To do this, the entire process of data processing and displaying must be split into small parts. For this, we are offered to use a certain Store / State entity.

The current state of the application is some kind of abstract object in a vacuum, a storage with data that can change this data. To change the state of the application, you need to call a special action that contains information about what action was performed, what needs to be done with the current state and what the next state should be. There are Views that actually call these Actions. I mentioned earlier the Dispatcher – this is the layer between the state (Store) and the called Action.

This Dispatcher is a proxy that redirects the Action. But let’s back to Redux and what he offers us. In fact, Redux is just an implementation of Flux with some modifications. He was invented by Den Abramov and he told us “Guys, let’s make just one store that will store the entire current state of the application. And our state will also be mutable.” That is, every time when some action is triggered, we change not the current data set, but we copy this set and write new data into it and replace the current one with it.

Thus, such a feature as time travelling is provided. It turns out that the entire state of the interface is described by just one JavaScript State Object. For example, if during the work of the application we save all the current state of the transferred changes, then we will get a certain lock of our states. And we can return to any of them at any time. 

How To Set Up An ReactJS Redux ProjectNow you know all the necessary information about the Redux and how it works and you can proceed to create such a project.

First, we need to install software for development. We need a code editor such as Visual Studio Code, NotePad ++ or something similar of your choice with syntax highlighting. We also need Node.js. It is a server side JavaScript framework that takes action on the client side and Node on the server.

Let’s create a starter project from which you can continue developing a web service:

1. To do this, create a folder and run the command line from this folder. To do this, find ‘cmd.exe’ in the start-up and run it. Using the ‘cd’ command, go to our folder and enter the following commands.

2. After each command, press enter to execute it. It should display the start page of our template for the project. Congratulations! You’ve taken the first step towards your first cool service development.

3. Let’s clean up our project a bit of files that we won’t be using: in the src folder, we’ll only leave index.js, app.js, app.css; leave only index.html in the public folder.

4. If we save the changes in all the files that we edited, then we will have a blank page displayed in the browser. Now, if we add something in the block, then these changes will be immediately displayed in the browser. For example, let’s write the classic Hello World phrase inside a div tag. Now if you save the changes, the browser will display this phrase. If you have studied HTML, then you should be familiar with this notation, but when we work with React, we use HTML markup, and JSX objects, which are converted to the markup of a normal HTML document. Now you have a template for a project.

5. Now let’s create the structure of the application. In the src folder, create the actions, components, reducers, services folders and the store.js file. We will need the latter to use Redux. In the components folder we will place all the components of our service. Create an app folder there and transfer the following files to it: app.js; app.css. The app.js file will contain the component code, and the app.css will contain the component styles. We also need index.js to import the component.

6. Now, in the index.js file in the src folder, we’ll change the import line for the App component. Now let’s try to run the project to see if we made a mistake. You need to run the command line. Go to our project folder and enter the’ npm start’ command. A blank project page should open. Now let’s add some functionality to our element. To do this, add code to the App component inside the div tag. Fine! The App is now ready for further manipulation.

7. Create a state that will store the state of the object. Let’s write an event handler for the fields. It is also located inside the class. Since you cannot change the state directly, we return a copy of the state (which we get using the spread operator) and the new value of the field. Now, whenever any field changes, the changes go to our local state.

8. Let’s check that everything is correct. We used the componentDidUpdate () component lifecycle method. This method is called when the component should update.

9. Now install the libraries for Redux. Go to Command Prompt press Ctrl + C, Y and Enter.

10. Write a simple reducer that will get the field name and the value that the user entered.

11. Let’s move our form into a separate Form component. To do this, in the components folder, create a new folder called “form” and place the files form.js and index.js in it. We will transfer everything related to our component to the form.js file, and also import the React library. In the form.js file, you need to connect the store, which the provider passes to all components within itself.

Hooray! We have come to the end of creating a React-Redux project. This was an example of writing a character generation service for a board game. It was a brief description of all the necessary steps. To create such a project you must be familiar with JavaScript, HTML, CSS. This is a basic set that already allows you to write simple one-page web services.

Conclusion

When the application is small, we can easily get by with just a React. But for a large project, it’s better to use Redux. Each React component has an object state – this is the data that the component will use. If there are a lot of such components, we may not keep track of all the states of objects. And Redux will allow us to operate with a common object, into which we will write data from the database and from which information will be loaded to our service. Hope it was interesting for you. Good luck in all your endeavors!