reactjs - Redux reducer - 使用 forEach 修改数组

标签 reactjs redux

在 Redux 中获取和基于响应更新我的状态中的数组时有一个小问题。

首先,我在操作中使用 forEach 完成了整个数组更新(基于我的初始状态对象)并将其发送到 reducer,它成功了。简单的。

但是后来阅读了修改应该只在 reducer 中完成的教程,并且该操作应该只处理获取响应。所以我试过这样做,两种方式,都失败了。

在这两种情况下,我发送给 reducer 的有效载荷只是我得到的准备好的响应。

谁能告诉我哪里出了问题以及在 reducer 中执行此操作的正确方法是什么?

这两种方法都行不通:

export const handleMusicCards = (state = musicState, action = {}) => { 切换( Action 类型){

case REQUEST_MUSIC_SUCCESS:
  return Object.assign({}, state, {
    musicStateItemList: state.musicStateItemList
      .forEach((el, i) => {
        el.track = action.payload.message.body.track_list[i].track.track_name;
        el.album = action.payload.body.track_list[i].track.album_name;
        el.artist = action.payload.body.track_list[i].track.artist_name;
        el.id = action.payload.body.track_list[i].track.track_id;
        el.favClicked = false;
        el.addedToFav = false;
      }),
    isLoading: false
  });

}

export const handleMusicCards = (state = musicState, action = {}) => { 切换( Action 类型){

case REQUEST_MUSIC_SUCCESS:
  return Object.assign({}, state, {
    musicStateItemList: state.musicStateItemList
      .forEach((el, i) => {
        return {
          ...el,
          track: action.payload.message.body.track_list[i].track.track_name,
          album: action.payload.message.body.track_list[i].track.album_name,
          artist: action.payload.message.body.track_list[i].track.artist_name,
          id: action.payload.message.body.track_list[i].track.track_id,
          favClicked: false,
          addedToFav: false,
        }
      }),
    isLoading: false
  });

}

最佳答案

我读了之后不确定是哪里出了问题。关于 redux 约定的更多信息。

Action 对象只是描述应该对状态进行哪些改变。 reducer 是实际应该改变状态的地方。在 redux 中,您永远不想修改状态对象,而是想复制它并返回一个包含更改的新对象,如操作对象所描述的那样。

所以你可能有一个看起来像这样的 reducer 案例......

const reducer = (state, action) => {
    switch (action.type) {
        case NEW_RECORD_SUBMIT :
            return {
                ...state,
                newRecordStatus: action.status,
            };
    default :
          return state;
  }
};

关于reactjs - Redux reducer - 使用 forEach 修改数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56031421/

相关文章:

reactjs - 如何设置material-ui持卡人头像?

javascript - zustand next 13 在服务器上设置初始状态并在客户端上获取状态

reactjs - 我们如何在 useState 中使用 redux state 来设置初始值

reactjs - React-Router的Link-To更新URL但不刷新页面

javascript - ReactJs - 在 Chrome 中触发文件下载

javascript - mapDispatchToProps 中的链接粗箭头让我出错

reactjs - React Redux 在 reducer 中分配箭头功能警告

reactjs - 在 Electron 应用程序中使用 Sqlite3 更新 Redux

javascript - 状态管理概念与其他解决方案

javascript - 如何在 React State 中更新数组的奇异值