Question

我有以下代码（ 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;

当我单击按钮时，它成功从redux存储中加载了数据。但是，我不想在单击按钮时加载数据。

能否让我知道如何在页面加载时加载数据？

Answer 1

您可以为此使用useEffect钩子。

尝试以下操作代替按钮onClick事件：

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

请参见useEffect文档：

如果您熟悉React类的生命周期方法，则可以将useEffect挂钩视为componentDidMount，componentDidUpdate和componentWillUnmount的组合。

+1建议：

需要空的依赖项数组，因为它仅在useEffect回调中运行一次，并且从技术上讲是在加载事件上执行了所需的数据提取操作。

我希望这会有所帮助！

如何在加载时分派redux钩子useDispatch（而不是单击按钮）？

1 个答案: