在“收藏夹列表”reducer

我有两个辅助函数“添加/删除”数组中的项目

添加运行良好，但删除它并没有在实际时间更新商店，因为我的 UI 中有一个检查器，用于检查数组中是否有这个 Song_id 并基于它我更新了心形图标但它不能正常工作当我调度删除操作时，换句话说“不重新渲染组件”！。

动作文件

import {ADD_TO_FAVORITE, REMOVE_FROM_FAVORITE} from './types';

export const addToFavoriteFunction = track_id => {
  return {
    type: ADD_TO_FAVORITE,
    payload: track_id,
  };
};

export const removeFromFavoriteFunction = track_id => {
  return {
    type: REMOVE_FROM_FAVORITE,
    payload: track_id,
  };
};

减速器

import {ADD_TO_FAVORITE, REMOVE_FROM_FAVORITE} from '../actions/types';

let initialState = [];

const addSongFav = (songs, songId, flag) => {
  if (songs.some(song => song.track_id === songId)) {
    return songs;
  } else {
    let isFav = {track_id: songId, isFavorite: flag};
    return [...songs, isFav];
  }
};

const removeSongFav = (songs, songId) => {
  const newState = songs.filter(song => song.track_id !== songId);
  return newState;
};


const isFavoriteReducer = (state = initialState, action) => {
  const {payload, type} = action;
  switch (type) {
    case ADD_TO_FAVORITE: {
      return addSongFav(state, payload, true);
    }
    case REMOVE_FROM_FAVORITE:
      return removeSongFav(state, payload);
    default:
      return state;
  }
};

export default isFavoriteReducer;

“音乐播放器组件”

 ....
 checkFavorite = () => {
    let {currentTrackIndex, tunes} = this.state;
    console.log(tunes[currentTrackIndex].id);
    let id = tunes[currentTrackIndex].id;
    let songs = this.props.favorite;
    let isFavorite = songs.some(song => song.track_id === id);
    this.setState({isFavorite});
  };

componentDidMount() {
    this.checkFavorite();
  }



  addToFavorite = async () => {
    const {tunes, token, currentTrackIndex} = this.state;
    this.setState({isFavorite: true});
    let id = tunes[currentTrackIndex].id;
    try {
      this.props.addToFavoriteAction(id);
      let AuthStr = `Bearer ${token}`;
      const headers = {
        'Content-Type': 'application/json',
        Authorization: AuthStr,
      };
      //  here i send a hit the endoint
    } catch (err) {
      this.setState({isFavorite: false});
      console.log(err);
    }
  };


deleteFromFavorite = async () => {
    const {tunes, token, isFavorite, currentTrackIndex} = this.state;
    let id = tunes[currentTrackIndex].id;
    this.props.removerFromFavoriteAction(id);
    try {
      let AuthStr = `Bearer ${token}`;
      const headers = {
        'Content-Type': 'application/json',
        Authorization: AuthStr,
      };
      // here i send a hit the endoint
    } catch (err) {
      console.log(err);
    }
  };



<Button onPress={() => this.state.isFavorite
                  ? this.deleteFromFavorite()
                  : this.addToFavorite()} >
  <Icon name={this.state.isFavorite ? 'favorite' : 'favorite-border'} />
</Button>

....

const mapDispatchToProps = dispatch => {
  return {
    incrementCount: count => {
      dispatch(incrementCount(count));
    },

    addToFavoriteAction: track_id => {
      dispatch(addToFavoriteFunction(track_id));
    },

    removerFromFavoriteAction: track_id => {
      dispatch(removeFromFavoriteFunction(track_id));
    },
  };
};

mapStateToProps = state => {
  return {
    favorite: state.favorite,
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(MusicPlayer);