In the past weeks I have been working in several features for my internship at Outreachy that involved the creation of a Redux Reducer. As I mentioned previously, I have special interest in understanding a bit better react and redux, a chance that I have while working in this project. I would like to share some notes about it, as I think sharing documentation and knowledge is crucial to enable other people learn how to code. I have always been very impressed by the documentation and help that I am able to find on the internet and have always dreamt of doing something similar to give it back to the community.
What’s a redux reducer? According to the official documentation, reducers specify how the application’s state changes in response to actions sent to the store. On the other hand, the actions only define that something happened but not how the application state changes.
So let’s imagine that we need to implement a component with four kinds of actions (following the CRUD pattern): Create a new record (Create), fetch information about a record (Read), update information about a record (Update), delete a record (Delete). I will focus in this example on how the create action and its interaction with the reducer would look like:
Create action:
In this case our app is a great directory about the Riot Grrrl movement that stores different kinds of information about the women involved in this kind of music. In this case, we would like to record information about them like name, bands, records. We could have an action that could look like the following:
/*
* action types
*/
export const ADD_ARTIST = ‘ADD_ARTIST’
/*
* action creators
*/
export function addArtist(name, bands, records) {
return { type: ADD_ARTIST, name, bands, records }
}
We would call the following action:
{ type: 'ADD_ARTIST’, name: ‘Kathleen Hanna’, bands: ‘Bikini Kill’, ‘Le tigre’, ‘The Julie Ruin’, records: ‘Revolution girls style now!”, “Feminist Sweepstakes”, “Run fast”}
—Note: I am sorry I am missing the most majority of Kathleen Hanna albums but it would be too long —
After we call this action, then the store will call the reducer and will pass the new state. The reducer is a pure function that only cares about the previous state and the new state. The reducer will first check the application state, then perform the action that has been dispatched and return the new state. If we have multiple reducers in our app, the root reducer will combine them in a single reducer, but imagine that this is the only reducer of our app.
Our previous state would be:
state = {}
and the new one would be
state = {
name: Kathleen Hanna,
bands: ‘Bikini Kill’, ‘Le tigre’, ‘The Julie Ruin’,
records: ‘Revolution girls style now!”, “Feminist Sweepstakes”, “Run fast”}
}
As in this case we only called a create action.
So we can say that the reducer will hold the state of the app that we can modify through the actions. This whole explanation might be a bit basic, but for me is still clue to understand what does each part of Redux do. This way I can always come back to my notes if I am lost in the future and maybe someone else can clear their mind as well.