Understanding How Reducers are Used in Redux

css-tricks.com css-tricks.com3 years ago in #Dev Love468

A reducer is a function that determines changes to an application’s state. It uses the action it receives to determine this change. We have tools, like Redux, that help manage an application’s state changes in a single store so that they behave consistently. Why do we mention Redux when talking about reducers? Redux relies heavily on reducer functions that take the previous state and an action in order to execute the next state. We’re going to focus squarely on reducers is in this post. Our goal is to get comfortable working with the reducer function so that we can see how it is used to update the state of an application — and ultimately understand the role they play in a state manager, like Redux. What we mean by “state” State changes are based on a user’s interaction, or even something like a network request. If the application’s state is managed by Redux, the changes happen inside a reducer function — this is the only place where state changes happen. The reducer function makes use of the initial state of the application and something called action, to determine what the new state will look like. If we were in math class, we could say: initial state + action = new state In terms of an actual reducer function, that looks like this: const contactReducer = (state = initialState, action) => { // Do something } Where do we get that initial state and action? Those are things we define. The state parameter The state parameter that gets passed to the reducer function has to be the current state of the application. In this case, we’re calling that our initialState because it will be the first (and current) state and nothing will precede it. contactReducer(initialState, action) Let’s say the initial state of our app is an empty list of contacts and our action is adding a new contact to the list. const initialState = { contacts: [] } That creates our initialState, which is equal to the state parameter we need for the reducer function. The action parameter An action is an object that contains two keys and their values. The state update that happens in the reducer is always dependent on the value of action.type. In this scenario, we are demonstrating what happens when the user tries to create a new contact. So, let’s define the action.type as NEW_CONTACT. const action = { type: ‘NEW_CONTACT’, name: ‘John Doe’, location: ‘Lagos Nigeria’, email: ‘[email protected]’ } There is typically a payload value that contains what the user is sending and would be used to update the state of the application. It is important to note that action.type is required, but action.payload is optional. Making use of payload brings a level of structure to how the action object looks like. Updating state The state is meant to be immutable, meaning it shouldn’t be changed directly. To create an updated state, we can make use of Object.assign or opt for the spread operator. Object.assign const contactReducer = (state, action) => { switch (action.type) { case ‘NEW_CONTACT’: return Object.assign({}, state, { contacts: [ …state.contacts, action.payload ] }) default: return state } } In the above example, we made use of the Object.assign() to make sure that we do not change the state value directly. Instead, it allows us to return a new object which is filled with the state that is passed to it and the payload sent by the user. To make use of Object.assign(), it is important that the first argument is an empty object. Passing the state as the first argument will…

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply