React-Redux for Newbies: Creating your first Redux Reducer

As we discussed in the previous section of this series, Redux is a state container that holds the most recent version of your application’s state. In Redux you must use reducers to update your store or application’s state.

import { createStore } from ‘redux’

const store = createStore(reducer)

In the code above, we created a store to hold our application’s state tree and specified the reducer that will be used to interact with our store.

export default function reducer (state, action) => {
    switch (action.type) {
        case actionTypes.AddRecipe:
            return {
                ...state,
                recipes: recipes.concat(action.item)
            }
        default:
            return state
    }
}

As you can you see above, we have created a reducer that takes the state and an action as arguments. Inside of our reducer, we update the state of our app based on the action type and return it. To ensure our reducer upholds the principles of a pure function, we return a new version of the state instead of mutating it. Hence the use of the object spread operator and array concatenation.

There are two ways we can handle the initialization of our state. We can pass a preloaded state into createStore or set a default value for our state parameter within our reducer. Below we will initialize our state tree using a default parameter in our reducer.

const initialState = Object.freeze({
    recipes: []
})

export default function reducer (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.AddRecipe:
            return {
                ...state,
                recipes: recipes.concat(action.item)
            }
        default:
            return state
    }
}