@shading

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

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

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

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

Как я понимаю, нужно в actions.js добавить функцию, только будет возвращать json данные с сервера, а в payload вызывать эту функцию, но я не могу догнать, как вызвать данный экшен, при переходе по ссылке
  • Вопрос задан
  • 1125 просмотров
Пригласить эксперта
Ответы на вопрос 1
Devilz_1
@Devilz_1
Frontend-Developer
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 > подсуньте свою "крутилку".
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы