Połączenie React z Redux

Dane umieszczamy w stanie Redux ponieważ chcemy je wyświetlać lub zmieniać z użyciem komponentów React. Inaczej trzymanie ich tam nie miałoby większego sensu. Połączenie tych dwóch światów jest możliwe dzięki funkcji redux-connect . W poniższych lekcjach pokazuję w jaki sposób używać podejścia mapStateToProps oraz mapDispatchToProps. Tłumaczę także czym jest HOC (Higher Order Component) i dlaczego konieczne jest użycie go w naszych komponentach React.

Na początek nauczymy się jak podłączyć React do store'a w Reduxie i wyświetlić wycinek danych:

Następnie warto opanować technikę zmiany danych, które mamy w storze po przez wykonywanie akcji:
import React from 'react'
import { connect } from 'react-redux'

 const MoviesContainer = ({movies}) =>
  <ul>
    {movies.list.map(movie => <li>{movie}</li>)}
  </ul>

 const mapStateToProps = (state) => ({
  movies: state.movies
})

 export default connect(
  mapStateToProps, {}
)(MoviesContainer)
import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import actions from '../duck/actions'

 const MoviesForm = ({add}) => {
  const movieInput = React.createRef()

   const addMovie = (event) => {
    event.preventDefault()
    add(movieInput.current.value)
    movieInput.current.value = ''
  }

   return <form onSubmit={addMovie}>
    <input ref={movieInput} />
    <button type='submit'>Add movie</button>
  </form>
}

 const mapDispatchToProps = dispatch => ({
  add: (movie) => dispatch(actions.add(movie))
})

 export default connect(null, mapDispatchToProps)(MoviesForm)

Kod z tego odcinka: Github

Zadanie domowe: Wyświetl dane z Redux i zmień je używając formularza HTMl.

Nie przegap nowych materiałów i zapisz się na Newsletter!

Z newslettera w każdej chwili można się bardzo łatwo wypisać. Wystarczy w stopce wiadomości kliknąć w link i już nigdy nie otrzymasz kolejnej wiadomości. Jeżeli interesuje Cię polityka prywatności oraz sprawy związane z tzw. RODO to zapraszam pod ten link.