使用 React useEffect 钩子和 Redux 加载微调器，不带 useState 钩子

Question

I need to have a loading spinner for my component. I am using react hook useEffect and because I am using redux , I can't use useState in this component.

this is what I've got so far and it doesn't work as expected.

import React, { useEffect } from 'react';
import { fetchData } from 'lib';


export default function Example(props) {

  let isFree = false;
  let isLoading = true;

  useEffect(() => {
    async function check() {
      const result = await fetchData(123);

      isLoading = false; // I am aware of react-hooks/exhaustive-deps
      if (!result){
        isFree = true; // I am aware of react-hooks/exhaustive-deps
      }
    }
    check();

    return function cleanup() {
      isLoading = false;
    };

  })

  const bookMe = ()=> {
    if (isLoading) {
      return false;
    }

    // do something
  };

  return (
    <div
      className="column has-text-centered is-loading">
      <div
        className={
          'button is-small is-outlined ' +
          ( isLoading ? ' is-loading' : '')
        }
        onClick={bookMe}
      >
        Select this slot
      </div>
    </div>
  );
}

Note: I tried useRef and I didn't get the answer.

Note: I can achieve the solution with class component as bellow. Follow isLoading .

But my question is rewrite the whole thing with useEffect() and without useState()

import React, { Component } from 'react';
import { fetchData } from 'lib';

export default class Example extends Component {
  _isMounted = false;

  state = {
    isFree: false,
    isLoading: true
  };

  componentDidMount() {
    this._isMounted = true;

    fetchData(123).then(result => {
      if (this._isMounted) {
        this.setState({ isLoading: false });
      }
      if (!result) {
        if (this._isMounted) {
          this.setState({ isFree: true });
        }
      }
    });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  bookMe = () => {
    if (this.state.isLoading) {
      return false;
    }

    // do something
  };

  render() {
    return (
      <div
        className="column has-text-centered is-loading">
        <div
          className={
            'button is-small is-outlined ' +
            (this.state.isLoading ? ' is-loading' : '')
          }
          onClick={this.bookMe}
        >select this slot</div>
      </div>
    );
  }
}

Answer 1

I am using react hook useEffect and because I am using redux, I can't use useState in this component.

Actually you can use useState.

• State management is tough and requires decision making. It is not the case that if you use redux you can't use state in your components.
• The question is where you want to manage your request. If you decide to manage your request in the component, it will have to include state.

In general Redux is more appropriate for:

• Storing state that is needed by the various parts of your application.
• Complex state management.

---

 let isFree = false; let isLoading = true;

In your code your aren't using useState, but you are actually trying to use state. This can't work because each time the let variable will be newly created by the function.