Каковы аналоги в реагирующих хуках для правильной реализации isLoading?

Question

Тогда

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { userActions } from 'redux/actions/userActions';

class Example extends Component {
    componentDidMount() {
        this.props.userActions.get();
    }

    render() {
        let { data, isLoading } = this.props.users;

        if (isLoading) {
            return <div>loading</div>;
        }

        return <div>{data}</div>;
    }
}

const mapStateToProps = ({ users }) => ({
    users,
});

const mapDispatchToProps = dispatch => ({
    userActions: bindActionCreators(userActions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Example);

Теперь

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { userActions } from 'redux/actions/userActions';

export default function Example() {
    const users = useSelector(state => state.users);
    const dispatch = useDispatch();
    React.useEffect(() => {
        dispatch(userActions.get());
    }, [dispatch]);

    if (users.isLoading) {
        return <div>loading</div>;
    }

    return <div>{users.data}</div>;
}

С помощью ловушек мы получаем время по умолчанию от редуктора isLoading = false в первый раз, а для компонентов мы сначала выполним componentDidMount и установите isLoading в true перед рендерингом.

Вопрос в том, как более элегантно разрешить этот случай с помощью ловушек реагирования?

Answer 1

Ваше решение выглядит хорошо. Я делаю такие вещи иногда в моем приложении. Вам просто нужно гарантировать, что что-то вызовет повторную визуализацию компонента enet, когда ваше условие для повторной визуализации станет истинным. В вашем случае условие загрузки зависит от вашего состояния приращения, поэтому при изменении этого состояния компонент автоматически будет корректно повторно отображаться из-за ловушки useSelector. Но если бы это было не так, вы могли бы использовать состояние, например:

function MyComponent() {
    const [loaded, setLoaded] = React.useState(false);
    if (!loaded) {
        //Do something asynchronous and then use the setLoaded function to trigger the component re-render
        return <View>LOADING</View>;
    }
    return <View>DONE</View>;
}