Javascript 返回新状态，don'；不要变异它。我这样做对吗？

我正在呈现一个

表格列表

，

onclick

，它将高亮显示任何选项卡。我通过检查

选定的
属性来实现这一点。
每次单击选项卡时，我都会在我的
reducer
中将所选
更改为
true/false

myTabsReducer
不应突变，而是返回一个新数组

我这样做对吗？根据文档，我们不应改变状态（不应改变状态）。就我而言，我正在修改我的
减速机
。这样做可以吗，还是有其他方法可以实现

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)),
  }
}

您没有对数组进行变异。每次调用reducer时，都会生成一个新数组

const foo1 = allReducers({}, {type:' SELECT_PLAN_TAB', payload: 1})
const foo2 = allReducers({}, {type:' SELECT_PLAN_TAB', payload: 1})

console.log(foo1.allTabs === foo2.allTabs) // false

您应该小心，因为即使输入保持不变，此函数也将始终返回新实例。这意味着浅层相等性检查将失败，并且取决于您使用此存储的方式，您的组件将始终重新呈现。
最好以这种方式呈现您的状态：

const initialState = {
  tabs: [
    { id: 1, name: 'Tab 1' },
    { id: 2, name: 'Tab 2' }
  ],
  selectedTab: 1
}

这样，您的减速机只更改“选择计划”选项卡上的selectedTab属性：

然后，如果您需要每个选项卡都具有所选属性的选项卡数组，我会使用选择器：请参见
，我觉得它像代码味道。抱歉@vijayst，我没有找到您。你对这段代码有什么建议吗？没错。我本来打算自己推荐，但你已经推荐了。
const activeTabReducer = (state = initialState, action) => {
  switch (action.type) {
    case SELECT_PLAN_TAB:
      return {
        ...state,
        selectedTab: action.payload
      };
    default:
      return state;
  }
}