I am rendering a `tabList`, `onclick` of any tab it will be highlighted. I am achieving this by checking a `selected` attribute.
Everytime a tab is clicked I am changing `selected` to `true/false` in my `reducer`.

`myTabsReducer` should not mutate but return a new array. 

Am I doing it right way? As per documentation We should not **mutate state** (should not alter state). In my case I'm altering my `reducer`. Is it Ok to do it or is there any other way to achieve it? 

```
export const myTabsReducer = (id) => {
      return [
        {
            id: 1,
            name:"My Tab 1",
            selected: id==1?true:false
          },
          {
            id: 2,
            name:"My Tab 2",
            selected: id==2?true:false
          },
          {
            id: 3,
            name:"My Tab 3",
            selected: id==3?true:false
          }
      ]
    }

const myActiveTabReducer = (state = {}, action) => {  
  switch (action.type) {
    case SELECT_PLAN_TAB:
      return action.payload
    default:
      return 1;
  }
}

const allReducers = (state = {}, action) => {
    return {
      allTabs: myTabsReducer(myActiveTabReducer(state, action)),
  }
}

```