javascript - 数组上的 redux reducer 扩展运算符不替换旧状态

标签 javascript reactjs ecmascript-6 redux

在我的 redux reducer 中,我更新了专辑列表两次。我希望第二个列表覆盖提供的第一个列表,但是,这不起作用,并且专辑第二次调用都会添加到第一次调用中。

我对下面的展开运算符是否有什么做得不正确的地方?请参阅下面我的 reducer 。

export default (state = [], action) => {

    switch(action.type) {

    case 'GET_ALBUM_NAME_SUCCESS':

        return [
            ...state,
            ...action.albums.map(album => {
                const newAlbum = {...album};
                delete(newAlbum.selections);
                return newAlbum;
            })
        ];

    default:

        return state;
}

最佳答案

如果您想向状态添加值,则不需要对要添加的值使用展开运算符,

export default (state = [], action) => {

    switch(action.type) {

    case 'GET_ALBUM_NAME_SUCCESS':

        return [
            ...state,
            action.albums.map(album => {
                const newAlbum = {...album};
                delete newAlbum.selections;
                return newAlbum;
            })
        ];

    default:

        return state;
}

但是,如果您只想覆盖以前的状态,则根本不需要展开运算符。

export default (state = [], action) => {

    switch(action.type) {

    case 'GET_ALBUM_NAME_SUCCESS':

        return [
            action.albums.map(album => {
                const newAlbum = {...album};
                delete newAlbum.selections;
                return newAlbum;
            })
        ];

    default:

        return state;
}

关于javascript - 数组上的 redux reducer 扩展运算符不替换旧状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43784929/

相关文章:

javascript - 我可以在 querySelectorAll 中使用正则表达式吗?

javascript - 使用 jquery 设置 fancybox 高度

reactjs - 在react-chartjs-2中缩放和平移

javascript - 如何在React Native中调用Alert onPress并传递一些参数

angular cli 和 Internet Explorer,取消注释 polyfills.ts 的缺点是什么

javascript - 无法让ajax请求在jquery中使用json工作

javascript - 缓存资源的模式

ruby-on-rails - Rails 不呈现 public/index.html 文件;浏览器中的空白页面

reactjs - 创建新的React应用程序后,在安装后导入软件包或将其包含在index.html中有什么区别?

node.js - 没有为 nodeJS 转译的 babel 定义 regeneratorRuntime