如何使用 reactjs redux 将新记录附加到已显示的记录

Question

我想要动态加载的数据库中有 10 条记录。 这个应用程序使用 react redux 从数据库加载数据。加载更多按钮也有效。

这是我的问题，

每次我点击加载更多按钮时，它都会从 将替换已显示记录的数据库。 我认为我的问题在于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 响应。

希望这会有所帮助。

更新

要正确显示buttonText，我建议将您当前的实现替换为：

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