как добавить новые записи в уже отображенные записи с помощьюactjs redux

Question

У меня есть 10 записей в базе данных, которые я хочу загрузить динамически. Это приложение загружает данные из базы данных, используя реагировать на редукцию. Кнопка Загрузить еще также работает.

Вот моя проблема,

Каждый раз, когда я нажимаю кнопку «Загрузить еще», он загружает еще 2 записи из база данных, которая заменит уже отображенные записи. Я думаю, что моя проблема заключается в Loadmore() функциях

1.) Как добавить новые записи в уже отображаемые записи каждый раз, когда нажимается кнопка загрузки.

2.) Также проверяю, чтобы отобразить сообщение Нет записей после завершения данных , но не может заставить его работать как сообщение отображается каждый раз при нажатии кнопки loadmore

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 };

здесь 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 код

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

Если я вас правильно понимаю, это то, что вам нужно сделать. Во-первых, не заменяйте все items на action.users. Согласуйте его со старым items состоянием:

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

Отсюда для правильного отображения "No More Message to Load" необходимо исправить условие this.finished:

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

Где 10 - общее количество пользователей, а не this.rowperpage. В идеале это значение должно исходить от ответа API.

Надеюсь, это поможет.

UPDATE

Для правильного отображения buttonText Я бы предложил заменить вашу текущую реализацию на что-то вроде:

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