Learning Redux
Exploring React in depth
Hello again! This was a very long week, I feel like I am learning a lot of new things quickly but I still have a lot to learn. That doesn’t really bother me, it’s the opposite, it inspires me more to keep improving. I am glad to be at Encora, I committed to them and myself to give my best effort and contribute to the growth of this great company.
In my last blog I talked about the React School classes and how much it was helping me. For this occasion I will focus again in that and the things I learned this week.
First of all, I must say that I am super happy and grateful to the React School team, they are doing an excellent job with their sessions, and it is very nice that they take their time preparing all the material to share with us their experience and knowledge.
The project we are doing for the classes is going well, Nico and I were working on that this week, and we are having good results. I am learning many things by doing the project, if you want to watch our advances I let you the repository here:
There are things that we could improve, I hope we can have the time for doing it.
The things I learned
Redux
Redux is a tool that developers use to make their lives easier. In short words, its job is “state management.”
State is data that change from time to time. State determines what’s displayed on the user interface. In general, there are three aspects of data that we’d need to manage in an app:
- Fetching and storing data
- Assigning data to UI elements
- Changing data
Coordinating these three aspects of state is a big part in front-end development, as the app grows more complex, its state may become harder to manage with React alone. That’s where Redux can help you.
Redux is a way to manage the “state” or we can say it is a cache or storage that can be accessed by all components with a structured way. It has to be accessed through a “Reducer” and “Actions”
Actions: Actions are events. Actions send data from the application (user interactions, internal events such as API calls, and form submissions) to the store. The store gets information only from actions. Internal actions are simple JavaScript objects that have a type property (usually constant), describing the type of action and payload of information being sent to the store.
Reducers: It’s based on the array reduce method, where it accepts a callback (reducer) and lets you get a single value out of multiple values, sums of integers, or an accumulation of streams of values. In Redux, reducers are functions (pure) that take the current state of the application and an action and then return a new state.
Store: Store is the object that holds the application state and provides a few helper methods to access the state, dispatch actions and register listeners. The entire state is represented by a single store. Any action returns a new state via reducers. That makes Redux very simple and predictable.
In the classes, we saw two ways of implementing redux in our projects, the “old way” where we define our reducer and actions in different files, and the “redux toolkit one” that provides a cleaner and shorter way to create our reducers and actions:
And finally, we also saw the react dev tools and how to use it, it’s a very efficient extension that can make our life easier because it allows us to see our states and their data. We can quickly debug and test our apps with this tool!
This is all for today, I hope you have enjoyed the reading, I wish you a great day and I see you next time!
