@yarnstart
Превозмогание и React

Хранение UI стейта и Redux?

Имеется массив объектов(список фильтров для вывода слайдеров), у каждого фильтра есть своё состояние, которое относится исключительно к UI(находится ли фокус на фильтре, ховер, значение тултипа при ховере и т.д.).
Можно было бы хранить стейт в самом слайдере, но мой рендер может зависеть от состояние других слайдеров(если на каком-то слайдере уже есть фокус - тултип при ховере выводиться не должен), сначала подумал перенести стейт в FilterList, но теперь встал вопрос как именно это сделать, как поступать в подобных ситуациях ?
Скриншот
image.jpg
Примерная структура
Компонент FilterList получает от контейнера props с массивом фильтров и диспатч для изменения значения фильтра, в цикле map создаётся компонент Slider(stateless function component), в него передаются props и функция для изменения значения слайдера, в которую входит диспатч(созданная в FilterList)
Примерный код

FilterList:
class FilterList extends Component {
  constructor(props) {
    super(props);
    // предполагаемый стейт
    this.state = [
      {
        isHovered: false,
        hoverValue: 0,
        hoverPositionLeft: 0,
        isFocused: false
      },
      // etc.
    ];
  }

  handleSliderMouseDown = () => event => {
    // функция изменения слайдера
  };

  render() {
    const { filterList, onSliderChange } = this.props;
    const list = filterList.map(item => {
      const { id, minValue, maxValue } = item;
      return (
        <FilterRow
          {...item}
          handleSliderMouseDown={this.handleSliderMouseDown(
            id,
            minValue,
            maxValue,
            onSliderChange
          )}
        />
      );
    });

    return <div className="filter-list">{list}</div>;
  }
}

Slider:
const RangeSlider = props => {
  const {
    value,
    isHovered,
    isFocused,
    cursorPositionLeft,
    handleSliderMouseDown
  } = props;
  return (
    <div onMouseDown={handleSliderMouseDown.bind(RangeSlider)}>
      <div className="range-slider__slide">
        <div className="range-slider__amount" style={amountStyle} />
        <div className="range-slider__thumb" style={thumbStyle} />
      </div>
      {/* Тултип, который не должен выводиться,
      если у какого-то из слайдеров уже стоит isFocused */}
      <RangeHint style={{ left: cursorPositionLeft }}>{value}</RangeHint>
    </div>
  );
};

  • Вопрос задан
  • 185 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы