Как получить доступ к переменной из Redux store?

110

13 марта 2021, 10:40

Есть хранилище

const store = {
  markers: [
    { lat: 45, lng: 24, show: true },
    { lat: 46, lng: 23, show: true },
  ],
};

нужно массив markers передать в state компонента

const mapStateToProps = state => {
  return {
    loaded: state.markers,
  };
};

Если обращаться в render() то обратиться к this.props.loaded получается, но как обратиться к нему в методе который перед render() находится?

getLoadedMark(this.props.loaded) { // явно не работает
  console.log(loaded);
}

Answer 1

Обращаться к пропсам в параметре метода не очень хорошая идея. Рекомендую вообще убрать это из параметра метода и перенести в тело метода. Так будет правильнее и понятнее.

Чтобы пропсы пробросились в метод (точнее, чтобы был доступ к props и state внутри функции компонента), необходимо, чтобы этот метод был прибайнден к компоненту. How do I bind a function to a component instance? Есть два простых пути решения проблемы, чтобы this был не свой, а компонентский.

Вариант первый - привязка в конструкторе класса (посредством bind):

constructor(props) {
  super(props);
  this.getLoadedMark = this.getLoadedMark.bind(this);
}

После этого внутри метода getLoadedMark можно будет заглянуть в props, только нужно убрать обращение к пропсам из параметра метода, вот так:

getLoadedMark() {
  const { loaded } = this.props;
  console.log(loaded);
}

Ну и второй вариант, более простой, без использования метода bind в конструкторе, просто через стрелочную функцию => пробрасываем this в метод. Метод немного видоизменится:

getLoadedMark = () => {
  const { loaded } = this.props;
  console.log(loaded);
}

Дополню ответ небольшим пояснением. Следующий код:

const { loaded } = this.props;

Эквивалентен следующему коду:

const loaded = this.props.loaded;

Это деструктурирующее присваивание (Destructuring Assignment), которое позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или литералов в объекте.