Загрузка блесны с хуком реакции useEffect и Redux и без хука useState

Question

Мне нужно иметь загрузочный счетчик для моего компонента. Я использую реагирующий крюк useEffect и потому что я использую reduxЯ не могу использовать useState в этом компоненте.

это то, что я получил до сих пор, и это не работает, как ожидалось.

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>
  );
}

Примечание: я пытался useRef и я не получил ответ.

Примечание: я могу достичь решения с помощью компонента класса, как показано ниже. следить isLoading,

Но мой вопрос переписать все это с useEffect() и без 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

Я использую реактивный крюк useEffect, и поскольку я использую избыточность, я не могу использовать useState в этом компоненте.

На самом деле вы можете использовать useState.

• Государственное управление жесткое и требует принятия решений. Это не тот случай, когда вы используете избыточность, вы не можете использовать состояние в ваших компонентах.
• Вопрос в том, где вы хотите обработать свой запрос. Если вы решите управлять своим запросом в компоненте, он должен будет включать состояние.

В целом Redux больше подходит для:

• Сохранение состояния, которое требуется различным частям вашего приложения.
• Комплексное государственное управление.

---

let isFree = false; 
let isLoading = true;

В вашем коде вы не используете useState, но вы на самом деле пытаетесь использовать состояние. Это не может работать, потому что каждый раз переменная let будет вновь создаваться функцией.