商店没有在 redux 中更新？

Question

在“收藏夹”reducer中

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

Add 运行良好，但 Remove 它不会在实际时间更新商店，因为我的 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);

Answer 1

感谢现场演示，它对查看全貌很有帮助。问题在于您的视图实际上根本没有使用 Redux 存储中的值。减速器很好，一切都在幕后工作，但是看看......

const mapStateToProps = state => {
  return {
    favorite: state,
  };
};

这是您的mapStateToProps 方法，favorite 包含一组收藏曲目，每当您发送操作时，这些曲目都会成功更新。您的视图未相应更新的原因是您没有在任何地方使用此数组。

<Icon
  style={{color:"#00f"}}
  type="MaterialIcons"
  name={this.state.isFavorite ? 'favorite' : 'favorite-border'}
/>

在这段代码中，您要检查的是组件内部状态中isFavorite 属性的值。添加收藏夹时它起作用的原因是因为您在addToFavorite 的开头调用了setState。相反，deleteFromFavorite 缺少 setState 调用，这就是您的图标没有改变的原因。

如果您想使用 Redux 商店中的内容来确定要显示哪个图标，您应该更改您的代码，使其使用 this.props.favorite，这是实际引用商店的属性并根据您的操作而变化。

const isCurrentTrackFavorite = () => {
  const { tunes, currentTrackIndex } = this.state;
  const currentTrackId = tunes[currentTrackIndex].track_id;

  // Check array in the Redux store to see if the track has been added to favorites
  return this.props.favorite.findIndex(track => track.track_id === currentTrackId) != -1;
};

render() {
  <Icon
    style={{color:"#00f"}}
    type="MaterialIcons"
    name={isCurrentTrackFavorite() ? 'favorite' : 'favorite-border'}
  />
}

通过进行此更改，您的组件将真正监听商店的内容，并且应该在收藏夹数组更改时更新视图。