How to make only a get request on compoment click - reactjs

Question

I have decided to use Typescript for all my react applications but I am having a bit of a problem because of the learning curve. I have a problem when I click to users, it should make a get request on component did mount, but it continues endlessly, this is mostly a code from a template from the dotnet create react redux app and I took most of the code for granted.
import * as React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
import { ApplicationState } from '../../store';
import * as UsersStore from '../../store/Users';
type UsersProps =
UsersStore.UsersState &
typeof UsersStore.actionCreators &
RouteComponentProps<{}>;
class Users extends React.PureComponent<UsersProps> {
public componentDidMount() {
this.ensureDataFetched();
}
public componentDidUpdate() {
this.ensureDataFetched();
}
public render() {
return (
<React.Fragment>
<h1>Users</h1>
{** // render users **}
</React.Fragment>
);
}
private ensureDataFetched() {
const token = "web_token";
this.props.requestUsers(token);
}
};
export default connect(
(state: ApplicationState) => state.users,
UsersStore.actionCreators
)(Users as any);
And my: store, action, reducer
import { Action, Reducer } from 'redux';
import { AppThunkAction } from './';
import userService from '../services/userService';
import { GET_USERS, GET_USER } from '../constants';
// STATE
export interface UsersState {
isLoading: boolean;
users: User[];
user: User;
}
export interface User {
id: string;
name: string;
}
// ACTIONS
interface GetUserAction {
type: 'GET_USER';
payload: User;
}
interface GetUsersAction {
type: 'GET_USERS';
payload: User[];
}
type KnownAction = GetUserAction | GetUsersAction;
// ACTION CREATORS
export const actionCreators = {
requestUsers: (token: string): AppThunkAction<KnownAction> => async (dispatch, getState) => {
// Only load data if it's something we don't already have (and are not already loading)
const appState = getState();
if (appState && appState.users) {
try {
const users = await userService.getUsers(token);
dispatch({ type: GET_USERS, payload: users })
} catch (err) {
console.log('Bad request, please try loading again.')
}
}
}
};
// REDUCER
const unloadedState: UsersState = { users: [], isLoading: false, user: { id: "0", name: "" } };
export const reducer: Reducer<UsersState> = (state: UsersState | undefined, incomingAction: Action): UsersState => {
if (state === undefined) {
return unloadedState;
}
const action = incomingAction as KnownAction;
switch (action.type) {
case GET_USERS:
if (state.users !== action.payload) {
return {
...state,
users: action.payload
};
}
break;
case GET_USER:
return {
users: state.users,
isLoading: false,
user: action.payload,
};
}
return state;
};
UPDATE: Added this check but now it does not update users state, my idea is to check whether the current state is not the same as the payload then it updates otherwise it will skip and break.
if (state.users !== action.payload) {
return {
...state,
users: action.payload
};
}
break;

Answer 1

Your componentDidUpdate() is the one causing infinite rendering issue
I can see that you already fetch the info in your componentDidMount(), so it's not necessary to fetch them over again.
First, after your component is rendered componentDidMount is invoked
Then your ensureDataFetched is fetched.
Your redux state is changed
Then your componentDidUpdate invoked due to that re-rendering
Your redux state is changed again.
Then your componentDidUpdate invoke all over again.
Infinite loop...
Just remove this block will end that endlessly rendering:
public componentDidUpdate() {
this.ensureDataFetched();
}