javascript - 返回新状态，不要改变它。我这样做对吗？

Question

我正在呈现一个 tabList，onclick 将突出显示任何选项卡。我通过检查 selected 属性来实现这一点。每次单击选项卡时，我都会在我的 reducer 中将 selected 更改为 true/false。

myTabsReducer 不应发生变化，而应返回一个新数组。

我做的对吗？根据文档，我们不应该改变状态(不应该改变状态)。在我的例子中，我正在改变我的 reducer。可以这样做还是有其他方法可以实现？

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

Answer 1

以这种方式拥有你的状态会好得多:

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

这样你的 reducer 只会改变“SELECT_PLAN_TAB”的 selectedTab 属性:

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

然后，如果您需要带有每个选项卡所选属性的选项卡数组，我会使用选择器:参见 http://redux.js.org/docs/recipes/ComputingDerivedData.html