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.