出於什么原因，React-Redux 中的調度比另一個調度首先被調用

Question

我構建了一個 Pokedex 並且工作正常，但是，我在 React-Redux 開發工具中看到了一個“問題”：

在“getPokemonsUrls”之前調用“getPokemonsInfo”，但是，只有在 state 的屬性發生更改（使用 useEffect()）時才應該調用“getPokemonsInfo”，而這發生在“getPokemonsUrls”中。

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";

import Home from "./Components/Home";

import { getPokemonsUrls } from "./helpers/helpers";

const App = () => {
  const urlDefault = useSelector(({ urlDefault }) => urlDefault);
  const dispatch = useDispatch();

  useEffect(async() => {
    dispatch(await getPokemonsUrls(urlDefault));
  }, []);

  return <Home></Home>
};

export default App;

import React from "react";
import { useSelector, useDispatch } from "react-redux";

import PokemonsContainer from "./PokemonsContainer";

import { getPokemonsUrls } from '../helpers/helpers';

const Home = () => {
  const urlDefault = useSelector(({ urlDefault }) => urlDefault);
  const dispatch = useDispatch();
  
  return(
    <>
      <h1>Pokedex</h1>
      <button onClick={async() => dispatch(await getPokemonsUrls(urlDefault))}>
        Get More Pokemons
      </button>
      <PokemonsContainer></PokemonsContainer>
    </>
  )
};

export default Home;

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import { getPokemonsInfo } from "../helpers/helpers";

const PokemonsContainer = () => {
  const pokemonsUrls = useSelector(({ pokemonsUrls }) => pokemonsUrls);
  const pokemonsInfo = useSelector(({ pokemonsInfo }) => pokemonsInfo);

  const dispatch = useDispatch();

  useEffect(async() => {
    dispatch(await getPokemonsInfo(pokemonsUrls));
  }, [pokemonsUrls]);

  return (
    pokemonsInfo.map(({ id, name, image }) => (
      <div key={id}>
        <p>{name}</p>
        <img src={image}/>
      </div>
    ))
  )    
  
};

export default PokemonsContainer;

import axios from "axios";

const getPokemonsUrls = async(url) => {
  const response = await axios.get(url);
  const data = await response.data;

  return {
    type: "getPokemonsUrls",
    payload: {
      urlDefault: data.next? data.next: null,
      pokemonsUrls: data.results.map(result => result.url)
    }
  }
};

const getPokemonsInfo = async(pokemonsUrls) => {
  const response = await axios.all(pokemonsUrls.map(url => axios.get(url)));
  const data = response.map(res => res.data);

  return {
    type: "getPokemonsInfo",
    payload: filterPokemonsInfo(data)
  }
};

const filterPokemonsInfo = data=> {
  return data.map(({ name, id, sprites, types, moves}) => ({
    name,
    id,
    image: sprites.front_default,
    types,
    moves
  }))
};

export { getPokemonsUrls, getPokemonsInfo };

import { createStore } from 'redux';

const initialState = {
  urlDefault: "https://pokeapi.co/api/v2/pokemon/?offset=0&limit=20",
  pokemonsUrls: [],
  pokemonsInfo: [],
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "getPokemonsUrls":
      return{
        ...state,
        urlDefault: action.payload.urlDefault,
        pokemonsUrls: action.payload.pokemonsUrls
      };
    case "getPokemonsInfo":
      return {
        ...state,
        pokemonsInfo: state.pokemonsInfo.concat(action.payload)
      }
    default:
      return state;
  }
};

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

export default store;

為什么會發生這種情況？

Answer 1

這是 React 中的預期行為。 useEffect 掛鈎將在組件掛載時運行，即使您列出了依賴項。 一個組件在其子組件安裝后才被視為已安裝。 因此，子組件中的 useEffect 掛鈎將在父組件中的 useEffect 掛鈎之前執行。

您可以在 useEffect 掛鈎中添加一個條件來獲取神奇寶貝信息。 該條件可以檢查是否已加載 URL，如果已加載，則僅運行 getPokemonInfo function。 這樣，useEffect 中的 function 將僅在獲取 url 后執行