The Redux library in Javascript is an application state management library. It is used to store and manage the state of the application in an easy and understandable way.
I have consulted the Redux library and used TypeScript language to write it.
Open Terminal at the project root directory.
Install the TypeScript environment.
$ npm install -g typescript
You can point to or dodge paths with "include" and "exclude" in the tsconfig.json file.
Put the path specified earlier in the tsconfig.json file into the script tag in the index.html file to link. Remember to set type as module.
<script type="module" src="your-typescript-file.ts"></script>Finally, to run the project using TypeScript Compiler to compile from TS to JS, immediately in the directory tree where file.ts is located, there will be an additional file.js for us to run in the browser.
$ tsc --watch
And I also edited the js file that nodejs compiled to make the code neater and cleaner and used use strict to set strict mode to avoid mistakes.
To be able to experiment more when using the library in addition to the project I have done and will introduce below, you can apply the library to projects with CRUD features (management of students, employees, products, etc.) or Todo List.
And in my project, I also created a bonus.ts file that simulates a user management application, you can use your redux library created to try it out or you can download redux to your computer as follows:
- Using npm in NodeJS environment
$ npm install redux
- Using yarn in Javascript environment
$ yarn add redux
After installing Redux, you need to import your code.
import Redux from 'redux'*Note: If you don't have npm installed, install it and follow the instructions here
Redux helps to separate application state and processing logic. It works based on the Flux model, with a single store to store the state and actions to change that state.
Flux Model.
This is a data flow model that emulates the Redux library:
redux.mp4
Simulate how Redux works on ATM deposit/withdrawal application.
Based on the above model, I also coded the redux library myself with the same operation and built the redux-based application like the picture above but it is a Money Saving Piggy application :)))
I built the UI and it works like below.
redux_library.mp4
The money saving piggy bank application works using the Redux library.