Redux is the state management library popularly use with React JS but can be used with the other MV* frameworks/libraries too.
“Redux is a predictable state container for JavaScript apps.”
It was developed by Dan in 2015 and got its popularity due to it’s less size which is just 2Kb as well as in comparison to Flux architecture is it simpler.
For the traditional developer , Redux concept could be little
confusing as the redux change the way developer used to create the applications.
Which is totally fine because you are not the only one who is getting confused with the
redux and its associated terms - actions, reducers etc. Many developers who start are not
able to get their head on same. In this blog post, I’ll discuss Redux,
it's jargons and usage/advantages of different parts of Redux.
When to use Redux?
Redux can be used with any view application - angular, vue, polymer, react. Redux is mostly getting used with the Reactjs. Whenever you have a project in which you want to play with the state use redux. Avoid using redux for small projects as it could look like overburden for a developer.
Advantages of using Redux:
Maintainability
Testing
Ecosystem
Data Flow
State is just a plain object holding the Data which is stored for your
application at the current point of time. It will get change as per the user
interaction.
Building blocks of Redux:
createStore :
createStore as name says it creates the redux store. There should be only 1 store in your app. It takes - initial state, reducer and optional middleware. It returns an object that hold the state of your whole app.
The only way to change the state is by dispatching actions. You can subscibe to its changes to its state.
action creators code example
Store :
Store is the one place where your whole data is. It’s an object that holds whole application’s state. Redux has helpers methods through which you can access the data, register the listeners and dispatch the actions.
You need to create store in your application by using import { create }. Whenever you need to use the store in your JS applications you need to use subscribe method on your store
Do not make multiple stores in your application
To apply multiple store enhancers, you may use compose().
The only way to change the state inside store is to dispatch an action on it.
3 principles:
Pure functions
Readonly
Single source of truth
Methods of Store :
getState()
return the current state tree of your app. It is equal to last value returned by store’s reducers
dispatch(action)
Dispatch the action. The only way to trigger the state change
subscriber(listener)
Adds a change listener. It is called when a actions is dispatched ot some part of state tress changes .
You call getState() to read the current state tree inside the callback.
It is low-level API and you can use it with Reactjs
replaceReducer(nextReducer)
High and advance level API. When you want to replace the reducer.
Dispatch
Calling actions in the app is simple
dispatch(actionCreators());
Actions:
“Action returns the new state via reducers.”
Once your JS application is ready, identify all the events your app can have such as: click on the button, ajax call, inputting some data, form submit etc. These all are the actions. Basically, actions are any event which can be any event either user initiated or due to any other reason/mode.
action code example
In Redux - actions are the objects with two key - Type and payload.In redux ,Store listens on to actions and return new state based on action referred.
Action Creators
actionsCreators are the pure function which return the actions. Hence
you can say that action wrap inside the action Creators
PS: Make separate file for each action
action creators code example
Reducers
Reducers are the pure function that takes - current state of the application and action. It returns a new state.
Reducers take the action creators and in the switch case, we start writing the logic code. The problem in redux’ reducers is it is not self-intelligent to understand which actionCreators is initiated by the users hence it runs all the reducers...hence we need to use a switch case to match the action. And return the state.
reducers code example
In complex application use { combinereducers}. It combines all the reducers
into single index reducers. Every reducer is responsible
for its own state and state parameter is different for every reducer.
