Реагировать Redux не отправляет API Вызов удалить игрока

Question

Я пытаюсь перевести мое ранее работающее локальное состояние в избыточный. Теперь загрузка доступных игроков работает нормально, но удаление каким-то образом остановится в файле playerActions. js, куда я отправляю, а затем возвращаю вызов API. Таким образом, для дальнейшей детализации, здесь приведены мои части кода по релевантности:

PlayerPage. js (Компонент):

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { loadPlayers, deletePlayer } from '../../redux/actions/playerActions';
import PlayerForm from './playerform';
import PlayCard from './playercard';
import PropTypes from 'prop-types';
import { toast } from 'react-toastify';

class PlayerPage extends Component {
  constructor(props) {
    super(props);
    this.handleDeletePlayer = this.handleDeletePlayer.bind(this);

  state = {};

  componentDidMount() {
    const players = this.props;

    players.loadPlayers().catch(err => {
      alert('Loading players failed. ' + err);
    });
  }


  handleDeletePlayer = player => {
    toast.success('Player deleted');
    try {
      deletePlayer(player);
    } catch (err) {
      toast.error('Delete failed. ' + err.message, { autoClose: false });
    }
  };

  render() {
    const styles = {
      margin: '20px'
    };
    return (
      <div className="container-fluid">
        <div>
          <h2 style={styles}>Add Player</h2>
          <div className="container-fluid">
            <PlayerForm handleAddNewPlayer={this.handleAddPlayer} />
          </div>
        </div>
        <hr></hr>
        <div>
          <h2 style={styles}>Available Player</h2>
          <div className="container-fluid">
            {this.props.players.map(player => (
              <PlayCard
                player={player}
                key={player.id}
                imageSource={`${process.env.API_URL}/${player.profileImg}`}
                onDeletePlayer={this.handleDeletePlayer}
              />
            ))}
          </div>
        </div>
      </div>
    );
  }
}

PlayerPage.propTypes = {
  players: PropTypes.array.isRequired
};

function mapStateToProps(state) {
  return {
    players: state.players
  };
}

const mapDispatchToProps = {
  loadPlayers,
  deletePlayer
};

export default connect(mapStateToProps, mapDispatchToProps)(PlayerPage);

И вызываемое Действие находится в здесь:

playerActions. js:

import * as types from './actionTypes';
import * as playerApi from '../../api/playerApi';

export function loadPlayersSuccess(players) {
  return { type: types.LOAD_PLAYERS_SUCCESS, players };
}

export function deletePlayerOptimistic(player) {
  return { type: types.DELETE_PLAYER_OPTIMISTIC, player };
}

export function loadPlayers() {
  return function(dispatch) {
    return playerApi
      .getAllPlayers()
      .then(players => {
        dispatch(loadPlayersSuccess(players));
      })
      .catch(err => {
        throw err;
      });
  };
}

export function deletePlayer(player) {
  console.log('Hitting deletePlayer function in playerActions');
  return function(dispatch) {
    dispatch(deletePlayerOptimistic(player));
    return playerApi.deletePlayer(player);
  };
}

console.log - это последнее, что попадает в приложение. Но API-вызов никогда не выполняется. Вызов API будет выглядеть следующим образом:

playerApi. js:

import { handleResponse, handleError } from './apiUtils';
const axios = require('axios');

export function getAllPlayers() {
  return (
    axios
      .get(`${process.env.API_URL}/player`)
      .then(handleResponse)
      .catch(handleError)
  );
}

export function deletePlayer(id) {
  return (
    axios
      .delete(`${process.env.API_URL}/player/${id}`)
      .then(handleResponse)
      .catch(handleError)
  );
}

Я был как распыление console.log в разных местах и ​​файлах, и последний раз я бьёт тот, кто в playerActions. js. Но после того, как вы нажмете на нее, часть с return function(dispatch) {} не будет выполнена.

Так что, если кто-то может указать мне общее направление, я буду более чем благодарен.

Answer 1

Похоже, вы называете своего создателя действия deletePlayer, но вы не отправляете его правильно. Вот почему вызывается console.log, а не метод, который выполняет запрос.

Я бы рекомендовал взглянуть на документацию для mapDispatchToProps, чтобы полностью понять, как это работает. В вашем примере вам просто нужно изменить вызов на deletePlayer в вашем PlayerPage компоненте на this.props.deletePlayer(), чтобы использовать создателя действий после того, как он был правильно связан с dispatch.

Answer 2

это то, как mapDispatchToProps должно быть:

const mapDispatchToProps = dispatch => {
  return {
    load: () => dispatch(loadPlayers()),
    delete: () => dispatch(deletePlayer()),
  }
}

, затем вызвать загрузку игроков с this.props.load() и удалить игрока с this.props.delete()