redux was created by Dan Abramov in 2015. Redux was inspired by facebooks’ flux & functional programming language. (on top of which redux works). Redux is a state management library, with redux instead of scattering the application state in various parts of the UI, we store all the application state in the central repository i.e a single javascript object called the store.
we can think of store as a database for front-end .
because of redux architecture different parts of UI no longer maintain their states differently. Instead, they get what they want from the store.
Officially Redux is a pattern and library for managing and updating application state, using events called “actions”.
Principles of Redux:
1.Single Source of Truth:
The global state of your application is stored as an object inside a single store. Any given piece of data should only exist in one location, rather than being duplicated in many places.
2.State is Read-Only:
The only way to change the state is to dispatch an action. This means nobody can change the state of the store directly.
3.Changes are Made with Pure Reducer Functions:
To describe how to state of store changes we use actions. we dispatch these actions using a pure function called reducer. reducer is a function that takes 2 arguments as input namely state & action & returns the updated state of the store.
What is Redux?
1.Redux is a state management library for javascript applications.
2.we can use Redux with React, angular vue.js & vanilla js because Redux is a state management library it doesn’t care about what library we use.
Pros & Cons of Redux:
Pros:
1.Predicatable state changes:
There is always one source of truth i.e our store. Hence there is no confusion about how to sync the current state with actions & other parts of the application.
2.Centralised state:
Redux centralizes our application state(in the store) so all the data our application needs is stored in a single place so that all the parts of UI can easily access it.
3.Code Organization:
Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected.
4.Developer tools:
The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur.
5.Easy debugging & testing:
with redux, it’s easy to debug our application & The first rule of writing a testable code is to create small functions that do only one thing & that are independent.
6.Preserve page state
7.supports undo & redo feature
8.supports multiple libraries & frameworks (React, Angular,vanilla, vue)
cons:
1.Complexity:
Redux introduces some indirections & complexity in your code this is because redux is based on functional programming & a lot of developers are not familiar with functional programming.
2.Verbosity:
Redux code tends to be verbose meaning, to use redux we need to add some boilerplate code to our application.
Installation:
To install redux we first need to setup the node runtime envirnoment. 1.Visit https://nodejs.org/ and install the package file. 2.Run the installer, follow the instructions and accept the license agreement. 3.Restart your device to run it. 4.Check Node & npm installation along with versions use npm -v & node -v
1.Install Redux:
To install redux use the below command,
#NPM
npm install --save redux
#yarn
yarn add redux2.Install react-redux:
To use react with redux we need to install react-redux,
#NPM
npm install --save react-redux
#yarn
yarn add react-redux3.install redux-dev tools :
#NPM
npm install --save-dev redux-devtools
#yarn
yarn add redux-devtoolsfor any queries you can write in comment section!!! 🙂 🙂