时间戳

首页 > 解决方案 > 如何在加载时调度 redux 钩子 useDispatch（而不是单击按钮）？

javascript - 如何在加载时调度 redux 钩子 useDispatch（而不是单击按钮）？

问题描述

我有以下代码（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 存储加载数据。但是，我不想在单击按钮时加载数据。

你能告诉我如何在页面加载时加载数据吗？

标签： javascriptreactjsreact-reduxreact-hooks

解决方案

您可以useEffect为此目的使用钩子。

尝试以下操作而不是按钮onClick事件：

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

从useEffect文档中查看：

如果您熟悉 React 类生命周期方法，您可以将useEffectHook 视为componentDidMount、componentDidUpdate、 和componentWillUnmount组合。

+1 建议：

需要空的依赖数组，因为它只在技术上在加载事件上运行一次useEffect具有所需数据获取操作的回调。

我希望这有帮助！

推荐阅读