Diving Into React + Redux
For those of you who are new to Redux, I wanted to offer my explanation for its use and applications in a manner that is as clear and easy to understand as possible. This explanation will take place within the context of React, although Redux is not strictly barred to the confines of React!
To begin on this journey, let’s have a brief recap of what “state” means. State in the context of React is an object where property values are stored as they pertain to a component. Examples of these properties are as limitless as the adjectives we could use to describe any single thing above or below the Sun.
Speaking of the Sun, let’s use it as an example for what conventional state declaration looks like within React:
this.state = {
name: 'The Sun',
size: 'Medium / Large',
brightness: 'You could describe it as bright',
warmth: 'Lukewarm',
distance_from_earth_in_inches: 892479846351014562
}
Assuming the Sun would exist in a component of stars, the properties above can all be passed down or modified within the component. If we wanted to be more accurate and say that the sun is closer to “hot” than “warm”, we would use the setState method with an arrow function to redeclare this value:
changeWarmth = () => { this.setState({ warmth: 'More like hot' });}
Some disadvantages of the setState method is that it is asynchronous, so after many instances it may not be clear if the state has already changed in some form or fashion, and by the law of properties the scope is limited in a topdown scenario. This is where Redux comes in handy!
Redux provides state in what is referred to as “store”. The store exists in the very top level of the application and therefore has global scope. Properties do not need to be passed down the component hierarchy as they do in traditional React applications, and so they can be accessed at any level.
The three main takeaways for Redux are documented as follows:
- There is a single source of truth, which is stored within an object.
- The state is read-only, meaning “actions” are the only way to change it.
- Changes to state are made via “pure functions”.
To clarify, “actions” in Redux are objects which are defined as the only source of information for the store to receive, and they take in a payload for the application to save. State changes are made via a function called “dispatch()” which will send the action object to the store. The action object will then be fed to what are referred to as reducers (pure functions) to determine how they will be handled. “Pure functions” are functions that have no side effects like callbacks or beyond.
Hopefully this helps clarify the conceptual nature of Redux! If you have any further inquiries, I have to say the documentation for Redux is astoundingly well laid out ;)
