If you still don't know what is Redux, in this article we are going to focus on explaining everything you should know about this library of JavaScript, as well as its uses, how it can be used, etc. This way, you will have all the necessary tools to be able to integrate it into your next JS projects.
Let's see what Redux is like!
What is JavaScript?
JavaScript (JS), is an interpreted programming language. It is considered a dialect of the ECMAScript standard and is characterized by being object-oriented, prototype-based, imperative, weakly typed and dynamic. Despite its name, it should not be confused with Java. Its creation is based on commercial considerations, following the acquisition of Sun Microsystems (creator of Java) by Netscape Navigator (creator of LiveScript) and the name change of the programming language.
Mainly used on client side, forming an integral part of web browsers. This allows you to improve the user interface and create dynamic web pages. Additionally, JavaScript can be used on the server side, known as Server-side JavaScript or SSJS. Its applicability extends beyond the web, finding use in PDF documents and desktop applications, mainly widgets, etc.
La JavaScript syntax resembles that of languages such as C++ and Java, although it adopts names and conventions from Java, hence its name. But, as I mentioned before, it is important to note that, despite their similar name, Java and JavaScript have different semantics and purposes.
On the other hand, we must remember that JavaScript uses an implementation of the Document Object Model (DOM), and that JS is the only programming language that browsers understand natively. Initially, it was used in HTML web pages for operations on the client without access to the server. However, today it is widely used to send and receive information from the server, often in combination with technologies such as AJAX. JavaScript is interpreted in the user agent while the statements are downloaded along with the HTML code.
JS Applications
JavaScript is a programming language widely used in a variety of applications and contexts, such as:
- Web development: It is essential in web development. It is used to improve interactivity and user experience on websites and web applications. It is used in the creation of interactive forms, visual effects, real-time data validations and dynamic navigation, among others. Present in:
- Web front-end: It is the cornerstone of front-end development. Frameworks and libraries like React, Angular, and Vue.js rely on JavaScript to create interactive and dynamic user interfaces in web applications.
- Web backend: Through platforms like Node.js, JavaScript is used on the server side to build complete web applications. This allows a developer to use JavaScript on both the front-end and back-end of an application, making it easy to synchronize data and build applications in real time.
- Server applications: Although not as common as other server-side languages, JavaScript is used in server application development through Node.js. This is especially useful for real-time applications and applications that handle a large number of concurrent requests.
- Mobile apps: It is used in the development of hybrid mobile applications using frameworks such as React Native and Ionic. These frameworks allow developers to write once and run the application on multiple platforms, such as iOS and Android.
- Online games: It is used in the development of online games and browser games. Libraries like Phaser and Three.js make it easy to create interactive 2D and 3D games in the browser.
- Desktop applications: Through tools like Electron, it is possible to build cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript.
- Browser extensions: To add additional functionality to web browsers, extensions are used. These extensions are usually written in JavaScript.
- Internet of Things (IoT) Applications: It is used in developing applications and systems for IoT devices due to its ability to communicate with hardware and sensors through APIs and specialized libraries.
What is Redux and how does it work?
Redux is an open source JavaScript library which is used to manage state in applications, and influenced by the Elm functional language. It is often combined with other libraries such as React or Angular to build user interfaces. It was conceived by Dan Abramov and Andrew Clark, who were inspired by the Facebook library called Flux.
Generally speaking, Redux is a small library with a Simple and limited API, designed to act as a predictable container for application state. Its operation is similar to the concept of "reduce" in functional programming.
The history of Redux dates back to 2015, when Dan Abramov started developing the first version of Redux while preparing to give a talk at the React Europe conference about Hot Reloading. During this process, Abramov noticed the similarity between the Flux pattern and the reducer function. This observation led him to wonder if a Flux store could actually be a reducer function.
To carry out this idea, Abramov contacted Andrew Clark, who was the author of the Flux implementation called Flummox. Together they collaborated to bring Redux to life and defined a coherent API. Additionally, they implemented the ability to extension using middleware and store enhancers, which contributed significantly to the current Redux ecosystem, further expanding its possibilities.
Redux and React relationship: what is React
React is a JavaScript library which focuses on creating user interfaces, although its versatility goes beyond that definition. This tool, initially developed by Facebook, is open source and widely used due to its ability to quickly create user interfaces in a variety of applications, including single page web applications (SPA) and Android applications. and iOS.
Unlike other frameworks, such as Angular, that offer more complex approaches, React is stands out for its ability to generate user interfaces efficiently. This is achieved through the use of .jsx files, which combine logic and user interface in a single file and are organized into units called components.
Virtual DOM: what is it?
When we delve into the world of ReactJS, we probably hear frequently about the concept of the Virtual DOM. This idea originates from an ingenious notion: instead of updating the entire actual DOM, we only modify the part that really needs changes. In old JavaScript applications, we used to receive data in JSON format from the server and then generate a complete new HTML to render, resulting in a refresh of the entire page on each modification.
How to install and configure Redux in your project
If you want to know how to install ReduxThe truth is that it is not complicated at all. To do this you must go to the terminal and from there you must execute the following command:
npm i -S redux
Now you have the stable version of Redux installed on your system. Of course, you'll probably need to resolve some dependencies, such as having npm, the Node.js package manager, installed. Once this is done, we are now going to install React, which you will also need to take advantage of Redux, as well as the development tools to be able to start creating your projects.
To install these other packages, the commands you must execute are:
npm i -S react-redux npm i -D redux-devtools
Now you would have everything ready to start. If you go to the main folder or directory where Redux has been installed, you will see that there are several subdirectories or subfolders, such as STORE, REDUCERS, ACTIONS, TYPES. You must know what each one is:
- SHARES: These are objects that must have two properties, one that describes the type (TYPE) of the action and another that describes what should be changed in the state of the app.
- REDUCERS- Reducers are functions that implement the behavior of actions. They change the state of the app, depending on the description of the action and the description of the state change.
- STORE: is the place where actions and reducers meet, maintaining and changing the state of the app. There is only one.
- KINDS: as I said before, it is the type of action.
Practical example: Creating an application with Redux
Un example using Redux It could be the following, where a simple accounting app is made using Redux. But to do this, you must first configure Redux and define your actions and reducers:
// Import Redux libraries import { createStore } from 'redux'; // Define the actions const incrementAction = { type: 'INCREMENT' }; const decrementAction = { type: 'DECREMENT' }; // Define the reducer const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }; // Create the Redux store const store = createStore(counterReducer); // Subscribe to changes in the store store.subscribe(() => { console.log('Current counter state:', store.getState()); }); // Dispatch actions to modify state store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);
This is a very simple example of how to use Redux. In a larger app, you would define more complex actions and reducers and connect React components to access and update the state of the store. But at least this gives you an idea of how it works...