使用 React/Redux 处理来自 API 的大量图像的最佳方法？

Question

我一直在研究这个 Pokemon api https://pokeapi.co/ 并通过在一个页面上列出所有的 pokemon 并制作链接来构建一个非常粗略的 Pokedex 版本您选择的神奇宝贝的更详细页面。

显然这是一组非常大的数据，几乎有 1000 个条目。这是一个非常简单的 React 应用程序，它使用 Axios 通过 Pokemon 进行映射并抓取它们的名称和图像以显示在主页上。

这就是我的问题开始的地方，每次重新加载 Axios 都会执行大约 1000 个图像请求。

缓存和提供图像和名称的最佳方式是什么，这样我就不必在每次访问页面时都加载它们？

这里有一些代码可以让您了解我到目前为止所做的事情：

function App() {
  const [pokemonList, setPokemonList] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      let response = await axios.get('https://pokeapi.co/api/v2/pokemon/');
      setPokemonList(response.data.results)
      return response;
    };

    fetchData();
  }, []);

  return (
    <Grid container>
      <Router>

        <Switch>
          <Route path="/pokedex/:id">
            <PokedexEntry pokemonList={pokemonList} />
          </Route>
          <Route path="/">
            <Home pokemonList={pokemonList} />
          </Route>
        </Switch>

      </Router>
    </Grid>
  );
}

这是包含口袋妖怪图像和名称的实际“Tile”。大约有 800 个。

const PokemonTile = ({ data }) => {

    const [pokemonData, setPokemonData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            let response = await axios.get(data.url);
            setPokemonData(response.data)
            return response;
        };

        fetchData();
    }, []);

    return (
        <li className="pokemonTile">
            <Link to={`/pokedex/${pokemonData.id}`}>
                {pokemonData.sprites ? <img src={pokemonData.sprites.front_default} /> : ''}
                <div>
                    {pokemonData.name}
                </div>
            </Link>
        </li>
    )
}

最好，我不想实施任何类型的延迟加载，因为我希望用户在加载后无缝地看到所有条目。我是否应该尝试自己提供图像而不是从 API 调用它们并让 API 处理抓取文本？

Answer 1

最好的办法是使用 Service Worker 并缓存所有图像。然后以虚拟方式呈现它们，以便浏览器仅在需要时加载图像。查看 React 的虚拟列表。

如果你想缓存 API 调用，我建议你使用我们的官方包装器。 https://github.com/PokeAPI/pokeapi-js-wrapper

使用 React/Redux 处理来自 API 的大量图像的最佳方法？

Best way to handle a large set of images from an API using React/Redux?

javascript

api

reactjs

pokeapi