обновить состояние массива в виде потока

Question

Когда я использую флюсоподобные, такие как Vuex или Redux.У меня есть вопрос об обновлении состояния списка.

У меня есть данные списка в состоянии потока.

// state.js 

{
  itemById: {},
}

И у меня есть массив идентификатора элемента в компоненте списка.

// listComponent.js

{
  data: {
    itemIds: [],
    items: data.itemIds.map(id => state.itemById[id]),
  };
}

Теперь я добавляю элемент в другой компонент.

// otherComponent.js

  addItem(newItem) {
    store.dispatch(newItem);
  }

Тогда состояние itemById имеет newItem, но itemIds не имеет идентификатора newItem.

если переместить itemIds в состояние.Когда listComponent уничтожают и восстанавливают, itemIds все еще существуют, но я не хочу этого.

Что я должен сделать, чтобы просто обновить itemIds?

Answer 1

Дополнение ответа @blaz. Если вы используете redux, в вашем listComponent.js вы должны использовать функцию connect из react-redux lib. Это даст возможность загружать данные из вашего состояния и вставлять их как реквизиты в ваш компонент.

const mapStateToProps = (state) => {
  const itemIds = Object.keys(state.itemById);
  const items = Object.values(state.itemById);
  return { itemIds, items };
};

export default connect(mapStateToProps)(ListComponent);

Answer 2

Одна проблема с вашим кодом состоит в том, что у вас есть 2 копии одних и тех же данных: одна в состоянии и одна в data из listComponent. Предполагая, что данные listComponent инициируются из данных состояния, для каждого обновления в состоянии вам нужно перехватывать и обновлять данные локального компонента, чтобы они соответствовали им. Уничтожение и воссоздание компонента не приводит к непосредственному обновлению локальных данных, и не рекомендуется воссоздавать весь компонент только для локальных данных, поскольку это лучше, чем цель жизненного цикла компонента.

Помимо потока, одна из причин, по которой люди используют такой инструмент управления состоянием, как redux или vuex, заключается в единственном источнике правды - должна быть одна копия глобального состояния, из которой может читать любой компонент. Чтобы исправить ваш код, одним из решений является перемещение itemIds и items с data на computed и прямой вывод их из состояния.

computed: {
    itemIds() {
        return Object.keys(state.itemByIds);
    },
    items() {
        return Object.values(state.itemByIds);
    }
}