Reducers and a Thank You to Flatiron School.
One of the premium benefits of using Redux in collaboration with our React applications is the use of the Redux store. The Redux store stores our application’s state, essentially providing a snapshot of the application at any given moment. This may include whether a dropdown menu is clicked, whether a box is checked, whether a post is liked, etc. This state is immutable, meaning that in order to update any of these aspects of the application that are included in the store’s state, then we need to re render the respective components with a brand new Redux state that displays proper information and functionality to the user.
In order to provide the proper page interaction that we’re all used to when we’re on the internet, in relation to the state housed within the Redux Store, we will need to dispatch an action, that will then go to a Reducer, which will then go to the rootReducer within the Redux store with a brand new state which will change the UIs for the user.
So what exactly does a Reducer do in Redux? css-tricks.com provides the answer fairly succinctly, stating that “a reducer is a function that determines changes to an application’s state. It uses the action it receives to determine this change. …Redux relies heavily on reducer functions that take the previous state and an action in order to execute the next state.” While we’ll get to Reducers in just a moment, it is important to first introduce our action. In this case, our action a post fetch request. In this example, the user is submitting hybrids to our rails api. Let’s dive into some code:
export const addHybrid = hybrid => {
return dispatch => {
fetch(‘http://localhost:3000/hybrids’, {
method: ‘POST’,
body: JSON.stringify(hybrid),
headers: {‘Content-Type’: ‘application/json’ }
})
.then(resp => resp.json())
.then(hybrid => dispatch({ type: ‘ADD_HYBRID’, payload: hybrid }))
}
}
Okay, so it may look like there’s a lot there. For the purposes of this post, just be aware that we are submitting a new hybrid object to our api, which is then coming back to our front end, converted to a javascript object, then dispatched. Pay attention the second half of that final line of code, as that will be important for the Reducer that we are about to dive into:
export const hybridsReducer = (state = [], action) => {
switch(action.type){
case ‘ADD_HYBRID’:
return […state, action.payload]
}
}
Reducers take in two arguments, state and action. It is important to note once again that calling an action through a Reducer will a create a whole new state. Therefore, state will always be an empty array before an action is called. When ADD_HYBRID is triggered we can see that we return […state, action.payload]. Let’s think about this for a second. Since this action is submitting a new hybrid to an already existing and populated list, we know that when we give this application its new state, we don’t simply want only the newest hybrid listed, but all of the hybrids including the newly posted one. Therefore, we instruct our Reducer to return the previous state (…state) plus the new hybrid (action.payload). This Reducer can be used from a component when the addHybrid function is imported, and just as an example, used in conjunction with a form submission.
A couple of final notes on Reducers. In order for our application to be aware of these Reducers, and for them to be able to do their job, they need to be called within the Redux store. Very importantly, since we are bound to have multiple Reducers as our application grows, we are only allowed to have one Reducer called in the Redux store, typically called the rootReducer. Since this application has a hybrids and robots reducer, we have to combine them in the rootReducer.js file.
export const rootReducer = combineReducers({
hybrids: hybridsReducer,
robots: robotsReducer
})
Now we can simply call our rootReducer in our Redux store, and we’ll have access to any Reducer we want to add to our rootReducer.
Since I have been writing these blog posts in conjunction with my enrollment at Flatiron School, and given that I am finishing my education there, I wanted to finish up by giving a sincere Thank You to everyone at the school who has helped me through the last six months, including both instructors, classmates, and other school personnel. I wish everyone the best, hope to keep in touch, and want to express gratitude for what has been great time for personal development and a good time personally period.
