React-Redux loading data from server?

Question

React

Git link - https://github.com/Shading29/tosterr
At the moment, the data from the server gets into the reducer in the UsersTableContainer component (the value of isLoading changes there to remove the loader), it follows that if I want to show the loader first, and after loading the data - the table itself, then the loader goes into eternal loading, because the data starts loading only after the UsersTableContainer starts rendering, and therefore the value of isLoading does not change at all.
The question is, where do you need to get the data in order for this construction to work correctly?
As I understand it, you need to add a function to actions.js, it will only return json data from the server, and call this function in payload, but I can’t catch up on how to call this action when clicking on the link

Answer 1

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)

Try like this. Instead of the < Preloader > component, slip your "twist".