Reduce, Reuse and Redux
Cha Cha Cha, lets reduce, reuse and make our state management a lot simpler with redux, this blog is on getting started with Redux
State
State management is a key aspect of any application.State has to do with the values in your application at any point in time. The go to example of state is when there is a simple form, the initial value within each form input box will be an empty string. Once the user types in the input into a box, there is a change in state, and the values within state are no longer the same.
User side interaction with an application leads to many values having the possibility of changing and possibly having an effect on the state. In a small application, such as a simple form, keeping track of these state changes can be fairly easy. However as your application continues to grown it will become more of a challenge to keep track of the state that is used and changed in various parts of the application.It also effects the way various parts of the application in different functions.
The only really solution to this problem is better and more organized state management. A large portion of your time will always go in planning your app and it state it is incredibly important. Lucky for us a popular and powerful state management tool was created it is the Redux library.
The Redux library can be used with a variety of front-end frameworks. In the Redux library, the three main pieces that bring it all together are the store, m the reducer and the action.
The Store
A store is an immutable object tree in Redux. A store is a state container which holds the application’s state. Redux can have only a single store in your application. Whenever a store is created in Redux, you need to specify the reducer.
The store will hold the state and the code responsible for changing, listening to, and retrieving the state. A store is created by calling the create store function from the Redux library and passing in a reducer function.
The Reducer
A reducer is a function that determines changes to an application’s state. It uses the action it receives to determine this change. The reducer passed into the sore is responsible for creating the state. This function also takes in two parameters, the current state and the action.
The key characteristic of the redux reducer is that it does not mutate the state in place, it is a pure function. A pure function is one that will produce the same output for a given input. Instead of mutating the state in place, the redux reducer will instead return a new state. The React framework for example does not use a pure function to change the state. In order to change the state, you can call the setState() method. This method mutates the original state in place.
The Action
An action is an object that is dispatched in order to notify that the state needs to be changed. The action has two properties, type and a payload. The type property is the type of action that will be taken to change the state. The payload is the changes that will be incorporated into the state, basically the data being returned. The type property is required the payload property is not.
Connect the Dots
Everything can be understood better when you have an image.
Here you can see that this reducer doing its job , it receives an action and the action type is checked within the if conditional. If the type is “ADD_REVIEW” then we return a new state being careful to keep the reducer as a pure function. In order to keep it a pure function it uses Object.assign to assign a reviews property to a new object and concat in order to add a new review to the current values within the reviews array without mutating the original reviews array.
There may be a couple holes to fill in. If it was so simple everyone would love redux for how easy it is to pick up. Im sure you have all kinds of remaining questions like how was the action sent ? What happens next after state is changed and how can i retrieve the state ?This and so much more can be answered via the redux library and the methods that can be called onto its store.
- The getState method : retrieves the state of the application. Because of redux you can retrieve the state from any part of your app is set correctly.
- The dispatch method : sends out an action in order to change the state. The ideal method for changing your state.
- The Subscribe method : for listening to the state’s changes and when it does change maybe running some code in response to it.
Obviously i have not and could not explain everything that redux has to offer. But i wanted to elaborate on the basics in a simple way. Redux is taking over and being comfortable with redux ensures that you will continue to make strides in this field. It is always best to implement redux from the beginning than to try to convert your app to a redux one half way. So why not do the same with learning it and getting started with it !
Sources
