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

Question

[Durin Qurkingo]

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

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

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

Comments

[Robur]

Вопрос то где?

Answer 1

[Антон Спирин]

Вы должны использовать флаги состояния в редьюсере и промежуточное ПО воде redux-thunk.
Посмотрите пример реализации асинхронного действия и редьюсера.
В итоге ваш компонент:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Preloader, Product } from './compnents';
import { fetchProductBySlug } from './actions';

const Example = ({ slug }) => {
  const dispatch = useDispatch();

  const { product, isFetching } = useSelector(state => ({
    product: state.product,
    isFetching: state.isFetching,
  }));

  useEffect(() => {
    dispatch(fetchProductBySlug(slug));
  }, []);

  if (isFetching) return <Preloader />;
  
  return <Product product={product} />;
};

export default Example;

Так же почитайте про селекторы и reselect. Ну и посмотрите туториалы по redux-thunk.