React + Redux + Redux Saga - лучший способ справиться с загрузкой флага - PullRequest
Новая
       6

React + Redux + Redux Saga - лучший способ справиться с загрузкой флага

1 голос
/ 14 января 2020

У меня есть базовый c компонент, который отображает список пользователей, когда компонент смонтирован, я использую useEffect для вызова API, который будет загружать данные, пока данные загружаются. Я хочу показать загрузчик в пользовательском интерфейсе. .

Насколько я понимаю, флаг загрузчика должен оставаться в состоянии реагирующего компонента , поскольку он представляет состояние этого компонента, а не в хранилище с избыточностью, поскольку хранилище с избыточностью представляет / сохраняет состояние всего приложение так, как вошли пользователь, список пользователей и т. д. c. а не каждое возможное состояние реагирующего компонента, является ли этот тип мышления неправильным или неправильным с точки зрения архитектуры приложения?

Я считаю, что если мы собираемся хранить флаги загрузки в избыточном хранилище, то зачем вообще использовать состояние реагирующего компонента, а не просто использовать избыточное хранилище?

Если нет, то какой самый простой способ добиться этого?

Реактивный компонент 

function List(props) {
    const [loading, setLoading] = useState(false);
    const reduxData = useSelector((store) => {
        return {
            users: store.users.list,
        };
    });

    useEffect(() => {
        //show loader
        setLoading(true);
        //wait until data is loaded
        props.requestRequests();
        // hide loader
        setLoading(false);
    }, []);

    if (loading) {
        return (
           <Loader />
        )
    }

    return (
        <Table users={reduxData.users} />
    );
}

1 Ответ

1 голос
/ 14 января 2020

Это скорее вопрос мнения, и это зависит от того, как вы структурируете свои операции загрузки данных, но, по моему мнению, если вы будете выгружать данные, извлекаемые во что-то вроде redux & redux saga, тогда вы также разгрузите свои флаги загрузки. .

Причина в том, что вы держите все связанные проблемы вместе. Не имеет смысла хранить флаги загрузки и загрузки данных в отдельных частях вашего приложения. Мало того, что это больше работает, но если вы держите их вместе, намного легче переключиться, какие данные загружаются каким компонентом; это все единое целое.

С учетом сказанного, что я хотел бы сделать для каждой операции извлечения данных, у меня было бы 3 действия с избыточностью: 

LOAD_DATA_REQUEST // triggers saga and sets redux loading flag to true
// both of the following actions are called by your saga and simultaneously set
// loading flag to false and either set received data in redux or set an error state
LOAD_DATA_SUCCESS
LOAD_DATA_ERROR

Теперь из любого компонента, который вы хотите , вы можете просто вызвать одно действие, а остальное обрабатывается этим действием.

Это только мое мнение, и есть несколько «правильных» ответов, но, как правило, я так делаю, и это сработало хорошо. .

...