React-Redux загрузка данных с сервера?

Question

[shading]

Ссылка на гит - https://github.com/Shading29/tosterr

На данный момент данные с сервера попадают в редюсер в компоненте UsersTableContainer(там же меняется значение isLoading, чтобы убрать лоадер), из этого следует, если я хочу сначала показывать лоадер, а после загрузки данных - саму таблицу, то лоадер уходит в вечную загрузку, ибо данные начинают грузиться только после того, как начнет рендериться UsersTableContainer, а следовательно значение isLoading не изменяется вовсе.

Вопрос в том, где нужно получать данные, чтобы данная конструкция работала правильно?

Как я понимаю, нужно в actions.js добавить функцию, только будет возвращать json данные с сервера, а в payload вызывать эту функцию, но я не могу догнать, как вызвать данный экшен, при переходе по ссылке

Comments

[Петр Мухуров]

if (isEmpty(users)) return <Spinner />

return <Table />

не?

Answer 1

[Nikolay Matyushkin]

import React, {Fragment} from "react"
import { connect } from "react-redux"
import UsersTable from "./UsersTable";
import { loadUsers } from "../../store/UsersTable/actions";


class UsersTableContainer extends React.Component {

    async componentDidMount() {
        const response = await fetch("http://www.filltext.com/?rows=500&id={index}&name={firstName}&surname={lastName}&city={city}&fullname={firstName}~{lastName}&lastloginfromip={ip}")
        const data = await response.json()
        this.props.loadUsers(data)
    }

    render() {
        const { users, loadUsers } = this.props
        return (
             <Fragment>
                   {!isLoading ? (
                        <React.Fragment>
                            <UsersTable
                                users={users}
                                loadUsers={loadUsers}
                            />
                        </React.Fragment>
                   ) : (
                      <Preloader>
                   )}
             </Fragment>
        )
    }
}

const setStateToProps = state => {
    return {
        users: state.userstable.users,
        isLoading: state.userstable.isLoading
    }
}

const setDispatchToProps = {
    loadUsers
}

export default connect(setStateToProps, setDispatchToProps)(UsersTableContainer)

Попробуйте так. Вместо компоненты < Preloader > подсуньте свою "крутилку".

Comments

[shading]

Уже сделал так, не успел дописать сюда. Теперь другая проблема, при переходе на данный компонент, таблица постоянно перерендеривается, хотя это связано с тем, что с данного адреса постоянно новые данные приходят и если они будут одни и те же , то ничего меняться не должно.
И еще вопрос, можно ли вообще оставить всё как есть или есть более красивый и правильный способ получать данные с сервера?
Редакс же специально сделан для того, чтобы отделить логику от рендера, и скорее всего можно как-то вынести получение данных в редюсер и сохранить работу)

[Nikolay Matyushkin]

shading, запрос к серверу вынести в action, а уже в componentDidMount вызывать его. Ну и делать всё-таки уклон на функциональный подход, а не классовый. Хотя бы в презентационных компонентах. Считаю функциональное программирование более эстетичным подходом.