State management isn’t just for the government.
Ok. That title is a stretch but it’s not easy to come up with a good pun about state management without making fun of Florida. Redux’s ability to manage a global state and dispatch actions to affect and update them is a pretty useful package for React. The way everything works together is still a challenge for me. But I think I’m starting to get it. Dispatching an action seems to be a little bit of a back and forth between files to connect them to the components you need. But once they make it there, it becomes very easy to access and update those states.
Redux, like I implied already, is a state management package that works with React. It’s biggest added feature is the global state. React on it’s own doesn’t have a global state. Everything is local and passed down as props. But by adding Redux, it creates a state that can be passed to any component regardless of where it is in the component structure.
The ‘store’ in Redux is where the package combines any initial states with their reducers and any middleware. Reducers are a function that can determine any changes to the state and execute a specified action to update it. So with these combined into the store, it creates a ‘single source of truth’. A single place the application can look to for its state and what to do with it.
The state is change through a specific set of functions. There is an order of operation that results in the state change. There is a function is called by a component to start and it collects whatever info it needs. That function and info is passed up the the components container where it was dispatched from. That dispatch passes it up to the correct action which then checks to see which reducer it should call. That reducer runs and takes any info it received to complete a function on the specific state. But it doesn’t change that state. The state is immutable. So the reducer must create a copy and update the state to the new copy. It sounds like taking the long way but these steps ensure that the functions and info are only passed to where they need to go.
Components can be a presentational component or a container component. And there is a difference between the two. A presentational component is concerned about how things looks. They are don’t specify how data is loaded or mutated and rarely have their own state. It’s more about design and UI for a presentational component. But a container component on the other hand is concerned about how things work. They are often stateful and have methods to load and mutate data. Often it is generated by a higher order compenent like connect() or createContainer().
setState() can have a second argument passed to it. That would be a callback function which will be invoked when setState has finished and the component is re-rendered. This callback function can be used to make updates after the state change is completed.
There are a number of frameworks and libraries out there that are used. And some are more popular than others. At this point, I’m most familiar with React since that’s what we’re learning. But as I search and read more, I hear many other developers singing the praises of other frameworks like Vue and Angular. Unfortunately, I haven’t put the time into learning more about these other frameworks yet. But I feel once I have a better grasp on working with React, learning to use other frameworks will come a little easier. This process is an always ongoing learning lesson. And I don’t see an end what I can learn since there isn’t an end to what is being developed out there.
