基于 redux 状态中的另一个值解构对象

Question

该应用程序有两个不同的选项卡，每个选项卡都有相同的下拉菜单。我目前正在保存 'selectedTab' 这是一个字符串，'selectedTabState' 这是一个包含 tab1 和 tab2 的对象，以及用户选择的字符串。我能够查看用户在哪个选项卡上，同时还可以在选项卡之间切换时保存下拉状态。这是它的外观示例。

selectedTab: 'tab1'
selectedTabState: {
  tab1: 'dropdownOptionOne',
  tab2: 'dropdownOptionTwo'
}

我想做的是使用解构访问用户所在的任何选项卡的 selectedTabState。我可以做这样的事情吗？

const { selectedStates: { *state of selectedTab* }} = state;

Answer 1

const state = selectedTab === 'tab1' ? selectedTabState.tab1 : selectedTabState.tab2

这对你有用吗

Answer 2

你可以像这样使用 Computed property names 解构

const state = {
  selectedTab: 'tab1',
  selectedTabState: {
    tab1: 'dropdownOptionOne',
    tab2: 'dropdownOptionTwo'
  }
}

const { selectedTabState: { [state.selectedTab]: value } } = state;

console.log(value)

但是，正如 Brian Le 所建议的，state.selectedTabState[state.selectedTab] 更简单

基于 redux 状态中的另一个值解构对象

Destructuring object based on another value in redux state

javascript

destructuring

ecmascript-6

redux