how to append new records to already displayed records using reactjs redux

Question

I have 10 records in the database that i want to load dynamically. This app loads data from database using react redux. The Load more button also works.

Here is my problem,

Each time I click on Load More button, it will load more 2 records from the database which will replace already displayed records. I think that my problem lies is the Loadmore() functions

1.)how do I append the new records to already displayed records each time the loadmore button is click.

2.)Am also checking to display a message No more records once data is finished but cannot get it to work properly as the message got displayed each time loadmore button is clicked

import React from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";

import { userActions } from "../_actions";

class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      row_pass: 0
    };
    this.row = 0;
    this.rowperpage = 2;
    this.buttonText = "Load More";
    this.loadMore = this.loadMore.bind(this);
  }

  componentDidMount() {
    this.props.dispatch(userActions.getAll(this.row));
  }

  loadMore() {
    this.row += this.rowperpage;
    alert("loading" + this.row);
    this.props.dispatch(userActions.getAll(this.row));
    this.buttonText = "Load More";
  }

  get finished() {
    if (this.row >= this.rowperpage) {
      return <li key={"done"}>No More Message to Load.</li>;
    }
    return null;
  }

  render() {
    const { user, users } = this.props;
    return (
      <div
        style={{ background: "red" }}
        className="well col-md-6 col-md-offset-3"
      >
        <h1>
          Hi{user.message}! {user.token}
        </h1>
        <p>You're logged in with React!!</p>
        <h3>All registered users:</h3>
        {users.loading && <em>Loading users...</em>}
        {users.error && (
          <span className="text-danger">ERROR: {users.error}</span>
        )}
        {users.items && (
          <ul>
            {users.items.map((user, index) => (
              <li key={user.id}>
                {user.firstName + " " + user.lastName}:
                <span>
                  {" "}
                  - <a>home</a>
                </span>
              </li>
            ))}
            {this.finished}
          </ul>
        )}
        <p>
          <a className="pic" onClick={this.loadMore}>
            {this.buttonText}
          </a>

          <input
            type="text"
            className="form-control"
            name="this.row"
            id="this.row"
            value={this.row}
            onChange={this.handleChange}
          />
        </p>
      </div>
    );
  }
}

function mapStateToProps(state) {
  const { users, authentication } = state;
  const { user } = authentication;
  return {
    user,
    users
  };
}

const connectedHomePage = connect(mapStateToProps)(HomePage);
export { connectedHomePage as HomePage };

here is user.action.js

function getAll(row) {
    return dispatch => {
        dispatch(request(row));

        userService.getAll(row)
            .then(
                users => dispatch(success(users)),
                error => dispatch(failure(error.toString()))
            );
    };

user.reducer.js code

import { userConstants } from '../_constants';

export function users(state = {}, action) {
  switch (action.type) {
    case userConstants.GETALL_REQUEST:
      return {
        loading: true
      };
    case userConstants.GETALL_SUCCESS:
      return {
        items: action.users
      };

    case userConstants.GETALL_FAILURE:
      return { 
        error: action.error
      };



/*


    case userConstants.DELETE_FAILURE:
      // remove 'deleting:true' property and add 'deleteError:[error]' property to user 
      return {
        ...state,
        items: state.items.map(user => {
          if (user.id === action.id) {
            // make copy of user without 'deleting:true' property
            const { deleting, ...userCopy } = user;
            // return copy of user with 'deleteError:[error]' property
            return { ...userCopy, deleteError: action.error };
          }

          return user;
        })
      };
*/
    default:
      return state
  }
}

Answer 1

If I understand you right, this is what you need to do. Firstly, don't replace the whole items with action.users. Concat it with the old items state instead:

case userConstants.GETALL_REQUEST:
  return {
    ...state,
    loading: true
  };
case userConstants.GETALL_SUCCESS:
  return {
    loading: false,
    error: null,
    items: [ ...(state.items || []), ...action.users ]
  };

From here, to properly show "No More Message to Load", you need to fix this.finished condition:

get finished() {
  if (this.row >= 10) {
     return (<li key={'done'}>No More Message to Load.</li>);
  }
  return null;
}

Where 10 is the total count of users, not this.rowperpage. Ideally, this value should come from API response.

Hope this helps.

UPDATE

To display proper buttonText I would suggest to replace your current implementation with something like:

get buttonText() {
  if (this.props.users.loading) return 'Loading...';
  if (this.props.users.error) return 'Error has occurred :(';
  return 'Load more'
}