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.
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:
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.
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.
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
return the current state tree of your app. It is equal to last value returned by store’s reducers
Dispatch the action. The only way to trigger the state change
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
High and advance level API. When you want to replace the reducer.
Calling actions in the app is simple dispatch(actionCreators());
“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.
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.
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
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.
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.
In Next part we will look into combineReducers, compose, applyMiddleware and few more...