Как диспетчеризировать хук редукса с помощью Dispatch при загрузке (не по нажатию кнопки)? - PullRequest
Новая
       56

Как диспетчеризировать хук редукса с помощью Dispatch при загрузке (не по нажатию кнопки)?

0 голосов
/ 03 мая 2020

У меня есть следующий код ( App.tsx ): 

import React from 'react';
import './App.css';
import { useSelector, useDispatch } from 'react-redux';
import { getAllMovies } from './redux/actions/movie';
import { Movie } from './redux/interfaces/movie';

function App() {
  const movies = useSelector((state: any) => state.movies);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <button onClick={() => dispatch(getAllMovies())}>Get all movies</button>
      {movies.items.map((movie: Movie) => <div>{movie.title}</div>)}
    </div>
  );
}

export default App;

Когда я нажимаю кнопку, он успешно загружает данные из хранилища избыточных данных. Однако я не хочу загружать данные одним нажатием кнопки.

Не могли бы вы дать мне знать, как загрузить данные при загрузке страницы , пожалуйста?

1 Ответ

2 голосов
/ 03 мая 2020

Для этой цели вы можете использовать useEffect hook.

Попробуйте использовать вместо кнопки onClick событие следующим образом: 

useEffect(() => {
   dispatch(getAllMovies());
}, []);

См. useEffect документация:

Если вы знакомы с методами жизненного цикла класса React, вы можете думать о useEffect Hook как componentDidMount, componentDidUpdate и componentWillUnmount вместе взятых.

+ 1 предложение:

Пустой массив зависимостей необходим, потому что он запускается только один раз с помощью обратного вызова useEffect с требуемым действием извлечения данных, технически при событии загрузки.

Надеюсь, это поможет!

...