Отправьте Toggle в Redux без сохранения в State? - PullRequest
Новая
       8

Отправьте Toggle в Redux без сохранения в State?

0 голосов
/ 27 февраля 2020

Как мне это сделать прямо сейчас

У меня есть список предметов. Прямо сейчас, когда пользователь нажимает кнопку X, shouldShowItem переключается. shouldShowItem в конечном итоге лежит в редуксе и передается в Item в качестве реквизита. это либо true, либо false. Когда он меняется, вызывается toggleDisplay и меняет состояние в моем хуке: 

useEffect(() => {
  toggleDisplay(!display); //this is just a useState hook call
}, [shouldShowItem]); //PS: I'm aware that I don't need this extra step here, but my actual code is a bit more complicated, so I just simplified it here.

Моя проблема в том, что у меня есть одно единственное свойство shouldShowItem в избыточном, а не одно shouldShowItem для каждого пункт. Я не хочу переводить это свойство в состояние приращения для каждого элемента.

Проблема:

Однако проблема с моей конструкцией заключается в том, что shouldShowItem сохраняется, что означает, что если я переключу его в время X для элемента Y , а затем мой Item Z также будет повторно визуализирован в результате несвязанное событие, оно будет перерисовано с обновленным состоянием shouldShowItem, хотя это изменение состояния было предназначено для Элемент X .

По сути, я сохраняю состояние shouldShowItem в приставке в то время как Мне просто нужен тумблер, который я могу отправить один раз, который работает с текущим Предметом, а затем больше не читается / не нужен. Я хочу в основном отправить тумблер, - меня не волнует состояние каждого элемента в избыточном коде, мне просто важно, чтобы он переключался один раз.

Предложения?

Редактировать: Подробнее Код

Элемент: 

const Item = ({shouldShowItem, itemText, updateCurrentItem})=>
{
    const [display, toggleDisplay] = useState(false);

    useEffect(() => {
      if (isSelected) {
        toggleDisplay(!display);
      }
    }, [shouldShowItem]);

    return (
      <div
        onClick={() => {
          toggleDisplay(!display);
          updateCurrentItem(item._id);
        }}
      >
       {display && <span>{itemText}</span>}
      </div>
    );
  }

Отображение списка элементов: 

  allItems.map((item, i) => {
        return (
          <Item
            key={i}
            shouldShowItem={this.props.shouldShowItem}
            itemText={item.text}
            updateCurrentItem={this.props.updateCurrentItem}
        );
      });

Реквизиты здесь получены из избыточного числа, поэтому shouldShowItem является логическим значением значение, которое лежит в приставке, и updateCurrentItem является создателем действия. И в редуксе я просто переключаю shouldShowItem true & false всякий раз, когда отправляется действие переключения. (Действие переключения, которое устанавливает и отменяет значение true / false для shouldShowItem, находится в каком-то другом компоненте и работает нормально)

1 Ответ

0 голосов
/ 27 февраля 2020

вместо логического shouldShowItem, почему бы не преобразовать его в объект с идентификаторами с логическими значениями: 

const [showItem, setShowItem] = useState({id_1: false, id_2: false})

const toggleDisplay = id => {
  setShowItem({...showItem, [id]: !showItem[id]})
  updateCurrentItem(id)
}

allItems.map((item, i) => {
  return (
    <Item
      key={i}
      shouldShowItem={showItem[item._id]}
      itemText={item.text}
      updateCurrentItem={toggleDisplay}
  );
});

const Item = ({shouldShowItem, itemText, updateCurrentItem}) => {
  return (
    <div
      onClick={() => toggleDisplay(item._id)}
    >
     {shouldShowItem && <span>{itemText}</span>}
    </div>
  )
}
...