Photo by Bjarte Kvinge Tvedt from FreeImages
What an exciting journey this has been so far! I am really proud of how much I have learned in just a few months. Let's keep this good energy going!
I have been thinking about this final project for some time, and I have an idea I am quite excited about building. However, when project time came around, I found myself facing one of life's most difficult challenges. Before I go into the details of my final project, it is important to take a brief but sad detour. My sweet English Bulldog was nearing the rainbow bridge. We were advised to make final arrangements for her. So heavy was my mind and heart that I knew I had to change my idea- there was no other way I would be able to focus.
*see end notes for more...
Now let's get happy again and talk about React and Redux- how much fun are they to play with? After swirling around while learning JavaScript for a spell, it was nice to put it to work using React's sensibly structured components. And Redux makes managing state less complicated by keeping one tidy store. Both libraries have documentation that is well-written and easy to follow.
As much as I enjoy working with both, I would like to focus this post on some fundamentals of Redux. Although Redux is typically used to manage complex state, working with it in my final project was a great learning experience.
Let's dig into some important things to remember when working with Redux.
The three fundamental principles of Redux:
Single Source of Truth
Your app's global state is stored within an object tree
inside a single store. This makes debugging easier.
State is Read-only
Actions are the only way to initiate a change of state.
This prevents any unwanted changes to your app's state.
Changes are Made with Pure Functions
Reducers specify exactly how state should be transformed
by these actions.
Note: a pure function is one that produces the same output when given the same input and is free from side-effects (doesn't alter outside state).
Another thing that is critical to understand is Redux flow.
Action ==> Reducer ==> Updated State
Actions are passed to the Reducer which initiates a change to State.
Let's take a look at this lovely diagram for a better understanding.
https://stackoverflow.com/questions/45416237/axios-calls-in-actions-redux
Here we can see in detail the flow of state change through Redux. The Store contains the current State which defines the user interaction that triggers an Action. The requested Action is sent to the Reducer using dispatch() which takes the current State from the Store, applies the requested Action, and then returns a new, updated version of State. Please note that the State that is returned is actually a copy of the original State with the updates applied. Remember that State is never mutated- use of the spread operator allows us to make a copy, apply the necessary changes, and return this updated State to the Store. To summarize:
Action creators are functions that return actions
Actions are objects that have keys that include instructions that the Reducer uses to change State
A Reducer is a function with a switch statement inside that receives instructions about how to change State using two arguments:
currentState and action-
The Store in Redux is an object with two functions:
- dispatch() initiates changes to State
- getState() gives access to the current State
*End notes: Tankie is actually doing much better- we ended up getting a second opinion and some hope. We also believe in the power of miracles. Thanks to everyone who sent good thoughts our way!
Also- my new idea is such a good one that I will be writing a post all about it once I have finished working out my stretch goals. Please stay tuned for more!
Top comments (0)