Question

我有一个加载对象，每个加载都有布尔值。我的州看起来像这样：

state: {
  loading: {
    itemA: false,
    itemB: false,
    itemC: false
  }
}

我想使用setLoading({ itemA: true })来更新我的状态，但是只保留itemB和itemC与当前状态无关，只更新itemA。

return {
  ...state,
  loading: {
    ...state.loading,
    itemA,
    itemB,
    itemC
  }
};

这是完整的减速器（浓缩）：

setLoading: state => ({ itemA, itemB, itemC }) => {
    return {
      ...state,
      loading: {
        ...state.loading,
        itemA,
        itemB,
        itemC
      }
    };
  }

不幸的是，如果我setLoading({ itemC: true })，A和B现在未定义。

我如何确保它们不是未定义的，而是状态中的任何内容？

请注意 - 我已尝试传递任何内容并进行对象分配或传播加载。

但是，为了提高可读性，我想知道我是否可以对道具进行解构而不必定义每个加载（我在这个页面上有12个单独加载的东西 - 一个仪表板）。

由于

Answer 1

使用https://gyazo.com/983cc12230530459ea7c19c5484c53db

const state = {
  loading: {
    itemA: false,
    itemB: false,
    itemC: false
  }
}

Object.assign(state.loading, {itemA: true});

console.log(state.loading);

Answer 2

只需传递一个你展开的变量

  setLoading: state => (newLoadingState) => {
    return {
      ...state,
      loading: {
        ...state.loading,
        ...newLoadingState
      }
    };
  }

Answer 3

您可以在结构中提供默认值

const fn = state => ({
    itemA = state.loading.itemA,
    itemB = state.loading.itemB,
    itemC = state.loading.itemC
}) => {
    return {
        ...state,
        loading: {
            ...state.loading,
            itemA,
            itemB,
            itemC
        }
    };
};

现在，当缺少变量时，它们取自传入的state;

const fn2 = fn({loading: {itemA: false, itemB: false, itemC: false}});
fn2({itemB: true});
// => {loading: {itemA: false, itemB: true, itemC: false}}

使用布尔值

3 个答案: