# Redux demystified - 2: combineReducers This post is a continuation of [Redux demystified - 1](https://blog.whatthecode.academy/redux-demystified). We understood the implementation of **createStore** and how we can manage the state when there is a single reducer. But that was just a simple example. Usually, any web app will have many different logically separated state objects which would need their own reducers. Eventually Redux will accept only a single state object and a single reducer function that manages the overall state. So in order to combine multiple state objects and reducers, the redux provides a function named.... **combineReducers**, wasn't too hard to guess I believe. We will add a new functionality to our example in the previous article, where we can add members to any of the two teams - Avengers and Justice League. ```html Heroes
``` The Heroes web app will now have two new features - to select a team and to filter the list based on the team, ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657439909328/YAFh-7yzz.png align="left") Earlier we had only one reducer that was used to handle adding and removing members. We have modified that reducer from **avengersReducers** to **membersReducer** to make it generic to add a member of different teams. ```js const filterReducer = (state = 'All', action) => { switch (action.type) { case 'FILTER_MEMBERS': return action.payload.filter default: return state } } ``` And we have added a new reducer to handle the filter state which will have one of the values from - *'All'*, *'Avengers'*, and *'Justice League'*. ```js const combinedReducer = Redux.combineReducers({ members: membersReducer, filter: filterReducer, }) const { getState, dispatch, subscribe } = Redux.createStore(combinedReducer) ``` We use the **combineReducer** method from **Redux** to combine our two reducers, which will return the combined reducer. Then we call **createStore** method with **combinedReducer** as its argument. The combined state object will be an object with two properties, - **members**: an array of member objects - **filter**: the selected filter among *'All'*, *'Avengers'*, and *'Justice League'* ```js const handleFilterMembers = e => { if (e.target.classList.contains('filter')) { filters.querySelector('.selected').classList.remove('selected') e.target.classList.add('selected') dispatch({ type: 'FILTER_MEMBERS', payload: { filter: e.target.innerText, }, }) } renderMembers() } ``` We have also added a click event handler on the list of filters which will update the filter state and then call **renderMembers** to update the UI. ```js const renderMembers = () => { const { members, filter } = getState() membersList.innerHTML = '' const listFragment = document.createDocumentFragment() const filteredMembers = filter !== 'All' ? members.filter(member => member.team === filter) : members filteredMembers.forEach(member => { const memberItem = document.createElement('li') memberItem.innerHTML = `

${member.name}

❌` memberItem.classList.add('member') listFragment.appendChild(memberItem) }) membersList.appendChild(listFragment) } ``` The **renderMembers** function first fetches the current members list and filter state from the **getState** method and then accordingly updates the UI and displays the list of heroes as per the selected filter. Now that we understand when and how to use **combineReducers** method, let's understand how it works internally. We know that the **combineReducers** expects an object as a parameter and returns a function that will serve as the combined reducer. Since the returned function will be a reducer we know it will have two parameters - a state and an action. Also, we can initialize that state with an empty object. ```js const combineReducers = (reducers) => { return (state = {}, action) => { } } ``` The ***reducers*** param is an object whose keys will be the individual state name and values will be the respective individual reducer. So we can use ``` Object.keys(reducers) ``` to iterate over the ***reducers*** object. Then use **reduce** higher-order method of the array to calculate the resultant state. You can learn and understand **reduce** in detail from [here](https://youtu.be/ti2PgUVR42w?t=3038) ```js const combineReducers = (reducers) => { return (state = {}, action) => { return Object.keys(reducers).reduce((prevState, stateName) => { return { ...prevState, [stateName]: reducers[stateName](state[stateName], action) } }, state) } } ``` We initialize the accumulator with the *state* param of returned combined reducer (empty object) and then the **reduce** method will iterate over each *stateName* and will update the resultant state object by executing each reducer and adding its respective returned state. If the implementation is not completely understandable at the first glance then go through it a couple of times. Add debug points or console logs while using it to understand it better. Now comment or remove the Redux CDN script tag, and add our implementation of **combineReducers** at the start of the JS code along with the implementation of **createStore** from the previous article. I have added it below for your convenience but definitely read the [previous article](https://blog.whatthecode.academy/redux-demystified) to understand the implementation of **createStore** ```js const createStore = (reducer) => { let state let listeners = [] const getState = () => state const dispatch = (action) => { state = reducer(state, action) listeners.forEach(listener => listener()) } const subscribe = (listener) => { listeners.push(listener) return () => { listeners = listeners.filter(l => l !== listener) } } return { getState, dispatch, subscribe } } const combineReducers = (reducers) => { return (state = {}, action) => { return Object.keys(reducers).reduce((prevState, stateName) => { return { ...prevState, [stateName]: reducers[stateName](state[stateName], action) } }, state) } } const Redux = { createStore, combineReducers } ``` Now our app should continue to work as before without the need to import Redux library code. Test it out thoroughly. I hope you were able to not only understand the use of **combineReducers** method but also its implementation. In the next article, I am going to demystify the implementation of the **Provider** component and the **connect** higher-order component of the **'react-redux'** library. Subscribe to my newsletter to be notified as soon as I publish it.