如何使用 react redux 正确地做一个加载屏幕

Question

我一直使用单独的组件来完成加载屏幕，使用 Loading...文本或某种微调器

然后导入此组件并呈现应用程序，加载状态设置为 true，直到组件已安装并将状态更改为 false。但是我在这里遇到了一个问题，只能通过在组件中设置超时来解决，我想避免这种情况，因为这意味着在某些情况下应用程序的加载时间比必要的时间长

请查看正在发生的事情的 gif：https://makeagif.com/gif/-dyW3DE

它在显示更新部分之前将包显示为空的闪烁。我希望它说加载直到包是正确的 redux 状态然后显示它

到目前为止的代码

  state = {
    isLoading: true,
  }

  componentDidMount(){
     this.setState({ isLoading: false })
  }


return isLoading ? ( <div> Loading... </div>) : (
    <div>
      <h4> Bag </h4>
      <Modal /> 
     // other bag stuff here
      <p> Bag total: £{this.bagTotal(bag.products)}</p>
    </div>
  )

我想最终将它移动到 redux 状态，但现在没有必要（也许？？）

有什么想法吗？

Answer 1

当你将其移动到 redux 时，只需分派函数来更改 isLoading 的值并使用 mapStateToProps 将状态连接到组件，当商店中的值更新时，组件将自动显示加载栏

Answer 2

你可以在不使用 redux 的情况下做那件事，它没有必要使用。如果您调用任何 Http API request 或使用 setTimeout.

import ReactDOM from "react-dom";
import React, { Component } from "react";

import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then(response => {
        return response.json();
      })
      .then(response => {
        this.setState({ isLoading: false });
        console.log("response :", response);
      })
      .catch(error => {
        this.setState({ isLoading: false });
        console.log("error :", error);
      });

    //or using setTimeout
     setTimeout(
        function() {
         this.setState({ isLoading: false });
        }.bind(this),
       3000
     );
  }

  render() {
    let { isLoading } = this.state;
    return (
      <div>
        {isLoading ? (
          <div className="App">
            <h1>Loading...</h1>
          </div>
        ) : (
          <div className="App">
            <h1>Hello CodeSandbox</h1>
            <h2>Start editing to see some magic happen!</h2>
          </div>
        )}
      </div>
    );
  }
}

Live Demo

如何使用 react redux 正确地做一个加载屏幕

How to correctly do a loading screen using react redux

javascript

loading

reactjs

redux