Question

这是我的组件：

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Divider } from "antd";
import MovieList from "../components/MovieList";
import IncreaseCountButton from "../components/IncreaseCountButton";
import DeleteButton from "../components/DeleteButton";
import { deleteMovie, increaseCount } from "../actions/movies";
import { getIsDeleting, getIsIncreasing } from "../reducers/actions";

export class MovieListContainer extends Component {
  constructor(props) {
    super(props);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  static propTypes = {
    isIncreasing: PropTypes.func.isRequired,
    isDeleting: PropTypes.func.isRequired,
  };

  async handleIncrease(movie) {
    await this.props.increaseCount(movie, this.props.token);
  }

  async handleDelete(movie) {
    await this.props.deleteMovie(movie.id, this.props.token);
  }

  render() {
    return (
      <MovieList movies={this.props.movies}>
        {(text, movie) => (
          <div>
            <IncreaseCountButton
              onIncrease={() => this.handleIncrease(movie)}
              loading={this.props.isIncreasing(movie.id)}
            />
            <Divider type="vertical" />
            <DeleteButton
              onDelete={() => this.handleDelete(movie)}
              loading={this.props.isDeleting(movie.id)}
            />
          </div>
        )}
      </MovieList>
    );
  }
}

export const mapStateToProps = state => ({
  isIncreasing: id => getIsIncreasing(state, id),
  isDeleting: id => getIsDeleting(state, id),
});

export default connect(
  mapStateToProps,
  { deleteMovie, increaseCount }
)(MovieListContainer);

我觉得这可能是出于性能/对帐的原因，但是我不确定其他如何以隐藏实现细节的方式检索状态。

要害链接：https://gist.github.com/vitalicwow/140c06a52dd9e2e062b2917f5c741727

感谢您的帮助。

Answer 1

在这里，您可以通过redux处理这些异步操作。您可以使用thunk执行2个动作，并可以存储一个标志来确定对一个对象正在执行的操作（删除，更改等）：

动作

export const deleteMovieAction = id => {
  return dispatch => {
    dispatch({ type: "MOVIE_DELETING", id });
    setTimeout(() => {
      dispatch({ type: "MOVIE_DELETED", id });
    }, 2000);
  };
};

减速器

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case "MOVIE_DELETING": {
      const movies = [...state.movies];
      movies.find(x => x.id === action.id).isDeleting = true;
      return { ...state, movies };
    }
    case "MOVIE_DELETED": {
      const movies = state.movies.filter(x => x.id !== action.id);
      return { ...state, movies };
    }
    default:
      return state;
  }
};

https://codesandbox.io/s/k3jnv01ymv

另一种方法是将ID分离到要删除的新数组中

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case "MOVIE_DELETING": {
      const movieDeletingIds = [...state.movieDeletingIds, action.id];
      return { ...state, movieDeletingIds };
    }
    case "MOVIE_DELETED": {
      const movieDeletingIds = state.movieDeletingIds.filter(
        x => x.id !== action.id
      );
      const movies = state.movies.filter(x => x.id !== action.id);
      return { ...state, movieDeletingIds, movies };
    }
    default:
      return state;
  }
};

https://codesandbox.io/s/mj52w4y3zj

（应清除此代码，但这只是为了使用thunk进行演示）

React / Redux-mapStateToProps中延迟状态加载的功能道具不好吗？

1 个答案: