从 reducer 中的 redux 状态删除歌曲

Question

我正在学习 react-redux，我有一个非常简单的应用程序，它显示静态列表中的虚拟歌曲，我当前的缩减器如下所示：

import { combineReducers } from "redux";

var songs = [
 { title: "No Scrubs", duration: "4:05" },
 { title: "Song 2", duration: "3:55" },
 { title: "Song 3", duration: "2:23" },
 { title: "Song 4", duration: "1:75" },
];

const songsReducer = () => {
  return songs;
};

const selectedSongReducer = (selectedSong = null, action) => {
  if (action.type === "SONG_SELECTED") {
    return action.payload;
  }

  return selectedSong;
};

const deleteSongReducer = (selectedSong = null, action) => {
  console.log("delete called");
  if (action.type === "SONG_DELETED") {

    var newArray = songs.filter((item) => item !== action.payload);
    console.log(newArray);
    return newArray;
  }
  return selectedSong;
};

export default combineReducers({
  songs: songsReducer,
  selectedSong: selectedSongReducer,
  deleteSong: deleteSongReducer,
});

selectedSongReducer 按预期工作，但是，我试图在调用 deleteSongReducer 时从静态列表中删除一首歌曲，我在记录它时可以在控制台中看到一个新数组，但结果反映在 UI 我的意思是删除的歌曲不会从列表中删除。我不确定我做错了什么，任何指示都会很棒。

Answer 1

你能检查一下你的 Console.log(歌曲) 在 UI 中渲染了多少次吗？在执行 deleteSongReducer 操作后，如果它重新渲染两次，则可能是 reducer 重置为它的 initialState.. 尽管如果你可以共享一个 codePen，我可以更深入地研究它

Answer 2

您对 reducer 应该如何工作的看法并不完整。您需要在 songs reducer 内部处理删除操作，而不仅仅是其他一些 reducer。

reducer 代表应用程序状态的一部分，例如歌曲，并处理应该对该部分产生影响的所有操作。简单来说，您的 songsReducer 应该处理：

初始状态
添加歌曲
正在删除歌曲
重新排序歌曲
可以触及歌曲列表的任何其他操作

function songsReducer(state, action) {
  switch (action.type) {
    case 'SONG_DELETED':
      return state.filter((item) => item !== action.payload);
    case 'SONG_ADDED':
      return ...;
    default:
      return state;
  }
}

selectedSong 可以留在另一个 reducer 中，因为它代表您状态的不同部分 - 不是歌曲列表而是指向选择歌曲的指针 - 这很好。

从 reducer 中的 redux 状态删除歌曲

delete song from redux state within reducer

reactjs

react-redux