What are the three principles that Redux follows ?
Back in time when the buzz about app development had just started, frontend was easy to achieve. However, with an increasing focus on end-user experience, the complexity to develop frontend frontend is rising and becoming overwhelming.
Get to the basics first if you are just getting started with redux and want to explore it in detail.
In order to understand the core of redux, you only need to know three principles.
- Redux is a Single Source of Truth: The global state of an app is stored within an object tree in a single store. As a result, it becomes easier to build universal apps due to the server’s state being serialized into the client without any extra codes. A single state tree, in turn, makes it easy to inspect an app. Besides this, it also enables a faster and shorter development cycle. Furthermore, some of the functionalities that have been traditionally tough to implement, such as Undo/Redo, can become trivial for implementation when the state is in a single tree.
- The State is Read-only State: There is only one way for changing the state–emit an action or an object that describes what happened. As per the second principle, neither the network nor the views callbacks would ever write to the state. Instead of it, these express intent for the transformation of the form. Since all of these changes are centralized and these can happen only in a strict order, there are no conditions to look for. Since actions are plain objects, these can be serialized, logged, stored, and then replayed to debug or test.
- The Modifications are Done with Pure Functions: In order to specify how can the state tree be transformed by actions, you can write pure reducers. The reducers are merely pure functions, which take the previous state as well as action and move it to the next state. You should remember that you should return to new state objects other than mutating to the last state. For first, you should start with one reducer. Now, while your application grows, you can split it off into small reducers, which can handle specific parts of the state tree. Since reducers are merely functions, you should control the order, wherein the order can turn into reusable reducers for the common tasks.
Creating React Application as well as Installing Module:
Step 1: Initially, create a React app using the below-mentioned command:
npx create-react-app Principle
Step 2: Once you create the folder with the appropriate folder name–Principle–and go along with it with the following command:
Step 3: Once you are done creating the ReactJS application, install the modules with the below-mentioned command:
Project Structure: It will look like the following:
Example: In the below example, we begin with the data layer by storing information. As per the first principle, Redux is a singular store for data sharing. Hence, we will start with creating a singleton for storage. According to the second principle, the pure functions have a characteristic to be predictable. These functions will not have any database calls or network calls. When we will call pure functions using the same argument or parameter sets, the same value will be returned. The following code is to be written in App.js. In addition to this, we will connect view layer to state layer with React-Redux. In the code below, the previous state will change when an action is triggered by the user, which means that upon will return to the new state.
Step to run the application: Open the terminal and type the following command.
Output: Open the browser and move to http://localhost:3000/ to view the following output.