Zastanawianie się, jak używać Redux z haczykami, używając w ten sposób, ale nie jestem pewien, czy jest to właściwy sposób

import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getPins } from "../../../actions/pins";

function MainStory() {
  const pins = useSelector(state => state.pins.pins);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPins(pins));
  }, []);
  console.log(pins);
return(<div> test </div>

Czy powyższa droga byłaby właściwą drogą pomimo brakujących zależności?

React Hook useEffect ma brakujące zależności: „wysyłka” i „szpilki”. Dołącz je lub usuń tablicę zależności

Z komponentami (tak jak wcześniej)

import { getPins } from "../../actions/pins";
import { connect } from "react-redux";
import PropTypes from "prop-types";
export class Pins extends Component {
  static propTypes = {
    pins: PropTypes.array.isRequired,
    getPins: PropTypes.func.isRequired
  };
  componentDidMount() {
    this.props.getPins();
  }
  render() {
    console.log(this.props.pins);
    return <div>test</div>;
  }
}
const mapStateToProps = state => ({
  pins: state.pins.pins
});

export default connect(mapStateToProps, { getPins })(Pins);

Plan jest taki, aby wymienić każdy pin

1
Xzeta 3 styczeń 2020, 21:21

1 odpowiedź

Najlepsza odpowiedź

Możesz dodać dispatch do listy zależności, ponieważ to się nie zmieni. Jeśli dodasz pins do listy zależności bloku useEffect, możesz spowodować nieskończoną pętlę, jeśli odpowiedź na akcję zmieni stan (wywołanie serwera, który zwraca tablicę).

Jednak zgodnie z przykładem komponentu klasy, kreator akcji getPins() nie wymaga wartości pins, więc możesz po prostu dodać dispatch do listy zależności:

function MainStory() {
  const pins = useSelector(state => state.pins.pins);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPins());
  }, [dispatch]);
  console.log(pins);
return(<div> test </div>
3
Ori Drori 3 styczeń 2020, 18:24