加载指示器出现但在 react-redux 中没有移动

Posted 2023-02-22

【中文标题】加载指示器出现但在 react-redux 中没有移动

【英文标题】：Loading indicator appears but does not move in react-redux

【发布时间】：2021-09-20 10:50:56

【问题描述】：

import  useEffect  from "react";
import  useSelector, useDispatch  from "react-redux";
import  BiLeftArrow, BiRightArrow  from "react-icons/bi";
import  useHistory  from "react-router-dom";

import 
  fetchMovies,
  handleCurrentPage,
  handleStatus,
 from "../../feautures/movies/moviesSlice";
import Card from "../Card/Card";
import Slider from "../UI/Slider/Slider";
import Navigation from "../Navigations/Navigation";

import "./MoviesList.scss";
import requests from "../../requests";
import LoadingIndicator from "../UI/LoadingIndicator/LoadingIndicator";

const MoviesList = () => 
  const dispatch = useDispatch();

  // Handle movies states
  const moviesStatus = useSelector((state) => state.movies.status);
  const moviesState = useSelector((state) => state.movies.movies);
  const moviesError = useSelector((state) => state.movies.error);
  const moviesHeading = useSelector((state) => state.movies.moviesHeading); // It's for pagination
  const moviesCurrentPage = useSelector((state) => state.movies.currentPage);

  let history = useHistory();

  // Handle header input
  const inputValue = useSelector((state) => state.movies.inputValue);

  // Movies according input values
  const filteredMovie = moviesState.filter((movie) =>
    movie.original_title.toLowerCase().includes(inputValue)
  );

  // Handle page number
  const handlePageNumber = (nexPage) => 
    dispatch(handleStatus("idle"));
    dispatch(
      handleCurrentPage(Math.max(1, Math.min(moviesCurrentPage + nexPage, 10)))
    );
  ;

  // Handle pagination
  useEffect(() => 
    if (moviesStatus === "idle") 
      if (moviesHeading === "POPULAR") 
        dispatch(fetchMovies(requests.fetchPopular(moviesCurrentPage)));
       else if (moviesHeading === "NOW PLAYING") 
        dispatch(fetchMovies(requests.fetchNowPlaying(moviesCurrentPage)));
       else if (moviesHeading === "UP COMING") 
        dispatch(fetchMovies(requests.fetchUpComing(moviesCurrentPage)));
      
    
  , [moviesCurrentPage, dispatch, moviesHeading, moviesStatus]);

  let content;

  if (moviesStatus === "loading") 
   else if (moviesStatus === "succeeded") 
    content = (
      <div className="movies__container">
        <BiLeftArrow
          className="movies__arrow movies__arrow--left"
          onClick=() => 
            handlePageNumber(-1);
            history.push(
              `/page/$(() =>
                Math.max(1, Math.min(moviesCurrentPage - 1, 10)))()`
            );
          
        />
        filteredMovie.map((movie) => 
          return <Card movie=movie key=movie.id />;
        )
        <BiRightArrow
          className="movies__arrow movies__arrow--right"
          onClick=() => 
            handlePageNumber(1);
            history.push(
              `/page/$(() =>
                Math.max(1, Math.min(moviesCurrentPage + 1, 10)))()`
            );
          
        />
      </div>
    );
   else if (moviesStatus === "failed") 
    content = <div>moviesError</div>;
  

  return (
    <div className="movies">
      <Slider />
      <Navigation />
      moviesStatus === "loading" ? <LoadingIndicator /> : content
    </div>
  );
;

export default MoviesList;

LoadingIndicator.jsx

import "./LoadingIndicator.scss"

const LoadingIndicator = () => 
  return (
    <div className="loading">
      <div className="loading__circle"></div>
      <div className="loading__circle"></div>
      <div className="loading__circle"></div>
    </div>
  );
;

export default LoadingIndicator;

LoadingIndicator.scss

.loading 
  display: flex;
  justify-content: space-between;
  align-self: center;
  
  width: 480px;
  &__circle 
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(
      45deg,
      rgba(2, 0, 36, 1) 0%,
      rgba(9, 9, 121, 1) 35%,
      rgba(0, 212, 255, 1) 100%
    );
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.3);
    transform: translateX(0);
    z-index: 2;
    &:nth-child(1) 
      animation: move-1 2s infinite;
    
    &:nth-child(3) 
      animation: move-3 2s infinite;
    
  

@keyframes move-1 
  0% 
    z-index: 3;
    transform: translateX(0);
  
  25% 
    z-index: 3;
    transform: translateX(80px);
  
  50% 
    z-index: 3;
    transform: translateX(0);
  

  50.1% 
    z-index: 1;
    transform: translateX(0);
  
  75% 
    z-index: 1;
    transform: translateX(80px);
  
  100% 
    z-index: 1;
    transform: translateX(0);
  

@keyframes move-3 
  0% 
    z-index: 1;
    transform: translateX(0);
  
  25% 
    z-index: 1;
    transform: translateX(-80px);
  
  50% 
    z-index: 1;
    transform: translateX(0);
  

  50.1% 
    z-index: 3;
    transform: translateX(0);
  
  75% 
    z-index: 3;
    transform: translateX(-80px);
  
  100% 
    z-index: 3;
    transform: translateX(0);
  

 

大家好。我尝试在moviesStatus === "loading" 直到moviesStatus === "succeeded" 时显示<LoadingIndicator /> 组件，但问题是<LoadingIndicator /> 组件出现但不移动，正如您在演示中看到的那样（三个蓝色大球）。我确实做到了本文档中的相同内容（https://codesandbox.io/s/github/reduxjs/redux-essentials-example-app/tree/checkpoint-3-postRequests/?from-embed=&file=/src/features/posts/PostsList.js）但不起作用。我已经好几天没能解决这个问题了。

演示：https://hope-movie.web.app/page/1 回购：https://github.com/UmutPalabiyik/hope-movie-app

【问题讨论】：

能否提供的code+css？

我添加了，但我不认为这是因为 组件在其他地方正常工作。

【参考方案1】：

你很快就得到了服务器的响应，所以你看不到 LoadingIndicator。要查看 LoadingIndicator，您可以手动降低响应速度。您可以像这样更新fetchMovies 函数：

export const fetchMovies = createAsyncThunk("movies/fetch", async (arg) => 
  return await new Promise((resolve) => 
    setTimeout(async () => 
      console.log("url: ", arg);
      const response = await axios.get(arg);
      resolve(response.data.results);
    , 3000);
  );
);