#4 Redux JS - триггер событий

poster
В этой уроке мы продолжаем знакомится с React и Redux. Мы научимся диспатчить наши события и обновлять данные в store.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Всем привет. В этом уроке мы продолжаем изучение React с Redux. В прошлом уроке мы с вами отрисовали список наших треков из store. Теперь нам нужно реализовать добавление новых треков.

Давайте добавим евент onClick нашей кнопке addTrack и прибайндим его сразу же

  <button onClick={this.addTrack.bind(this)}>Add track</button>

и опишем эту функцию

addTrack() {
    console.log('addTrack');
}

Если мы в браузере кликнем по кнопке, то в консоли увидим addTrack.

Теперь мы хотим получить введенное в input значение. Так как мы не хотим хранить локальный стейт и слушать change event, как мы делали в уроке про локальный стейт, а просто хотим получить введенное значение в input мы можем использовать для этого ref, как мы делали в уроке по React.

<input type="text" ref={(input) => { this.trackInput = input; }} />

Добавим инпуту ref и запишем в this.trackInput ссылку на input.

Теперь в методе addTrack мы можем вывести значение input.

addTrack() {
    console.log('addTrack', this.trackInput.value);
}

Если мы посмотрим в браузер, то мы получили при клике значение нашего инпута.

Теперь мы хотим диспатчить наш евент ADD_TRACK, как мы с вами писали на чистом javascript. Для этого в функции connect существует второй аргумент. Это функция, которая на вход получает dispatch и возвращает обьект с методами.

Давайте добавим метод onAddTrack.

export default connect(
  state => ({
    testStore: state
  }),
  dispatch => ({
    onAddTrack: (trackName) => {
      dispatch({ type: 'ADD_TRACK', payload: trackName })
    }
  })
)(App);

Мы создали метод onAddTrack, который принимает на вход имя трека и диспатчит екшен с типом, как мы делали ранее.

Теперь он нам доступен в this.props и мы просто вызываем его в addTrack.

this.props.onAddTrack(this.trackInput.value);

Если мы посмотрим в браузер, то у задиспатчился екшен и данные добавились в store и все работает, правильно отображается список треков, только инпут не очищается. Давайте добавим этот функционал. Для этого просто присвоим в trackInput пустое значение.

addTrack() {
    console.log('addTrack', this.trackInput.value);
    this.props.onAddTrack(this.trackInput.value);
    this.trackInput.value = '';
}

Вот мы с вами и реализовали базовый пример работы React и Redux.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Максим Сафаралиев
1год назад назад
Здравствуйте. Я не могу понять как передать локальный state компоненты А, чтобы он был доступен в компоненте В в качестве this.props компонента А имеет this.state({someState: id_полученный_по_клику}) // который я получаю по клику на элемент function someFunction() { this.props.onElementClick(this.state.someState) // передаю полученный id в качестве параметра } потом делаю export default connect ( mapStateToProps, // здесь данные из store dispatch => ({ onElementClick: (id) => { dispatch({ payload: id }) } }) )(компонента А) Т.е. я хочу по клику на элемент взять его id, и потом в другой компоненте его вывести. Собственно вопрос: как мне вызвать в компоненте В то, что передаю в dispatch из компоненты А ? Заранее спасибо.
monsterlessons
1год назад назад
Добрый день. Вы написали все правильно, но только половину кода 1. Вы вызываете this.props.onElementClick с нужным вам аргументом (например id) (это вы сделали). 2. В connect вам нужно передать в dispatch не только payload, но и type, потому что type - это обязательное поле dispatch({type: "MY_ACTION", payload: id}) 2. Теперь вам необходимо в store слушать ваш экшен и изменять store. То есть вы должны написать редьюсер, который слушает экшен и делает изменения, например, сохраняет id где-то в стейте 3. После этого в компоненте B вы должны написать connect в mapStateToProps, в котором вы слушаете нужное вам поле connect(state => ({ id: state.id }), componentB)
Максим Сафаралиев
1год назад назад
Большое вам спасибо! Теперь все работает.Вы герой! :)
Ezheg
2 лет назад
connect также добавляет dispatch в props. Есть разница использовать this.props.dispatch или mapDispatchToProps?
monsterlessons
2 лет назад
Разницы по факту нет. mapDispatchToProps - это синтаксический сахар, который все екшены закидывает в props. Главное придерживаться одного стиля в проекте. Я предпочитаю писать так import someAction from './someAction' const mapDispatchToProps = { someAction } и тогда this.props.someAction будет доступен и можно его вызывать просто this.props.someAction() без диспатча.