修复redux中的扩展语法错误

修复redux中的扩展语法错误,redux,Redux,我是Redux的新手,我正在使用Redux为状态管理创建一个react book应用程序。据我所知,建议使用扩展语法来防止状态突变。在我的例子中,我有两本默认的书,我想在程序启动时输出它们。“GET_BOOK”中的返回出现问题,因为我遇到了语法错误。任何关于减少bookReducers中我的代码的建议,我都非常感谢 bookReducers.js: let defaultBooks=[{ id:1, title:'First Book', description:'Thi

我是Redux的新手,我正在使用Redux为状态管理创建一个react book应用程序。据我所知,建议使用扩展语法来防止状态突变。在我的例子中,我有两本默认的书,我想在程序启动时输出它们。“GET_BOOK”中的返回出现问题,因为我遇到了语法错误。任何关于减少bookReducers中我的代码的建议,我都非常感谢

bookReducers.js:

let defaultBooks=[{
    id:1,
    title:'First Book',
    description:'This is first book description',
    price:33,
    currency:'Euro'
},
{
    id:2,
    title:'Second Book',
    description:'This is second book description',
    price:24.50,
    currency:'Euro'
}];
// Book reducer
export function bookReducer(state={books:defaultBooks} , action){
    switch (action.type) {
        case 'GET_BOOK':
            return {...state, books:[...state.books]};
            break;
        case 'POST_BOOK':
            // return state= action.load;
            return {books:[...state.books,...action.load]};
            break;
        case 'DELETE_BOOK':
            const indexToDelete=[...state.books].findIndex((book)=>{return book.id===action.load.id;})
            return {books:[...state.books.slice(0,indexToDelete),...state.books.slice(indexToDelete+1)]};
            break;
        case 'UPDATE_BOOK':
            const indexToUpdate=[...state.books].findIndex((book)=>{return book.id===action.load.id});
            const newBook={
                id:state.books[indexToUpdate], 
                title:action.load.title,
                description:action.load.description,
                price:action.load.price,
                currency:action.load.currency
            };
            console.log(newBook);
            return {books:[...state.books.slice(0,indexToUpdate),newBook,...state.books.slice(indexToUpdate+1)]};
            break

    }
    return state
}
action.js

export function getBooks(){
    return{
        type:'GET_BOOK'
    }
}

// add books
export function postBooks(book){
    return{
        type:'POST_BOOK',
        load:book
    }
}

// delete a book
export function deleteBook(id){
    return{
        type:'DELETE_BOOK',
        load:id
    }
}

// Update a book
export function updateBook(book){
    return{
        type:'UPDATE_BOOK',
        load:book
    }
}
错误发生在返回{…state,books:[…state.books]};以防在减薄器中获取书籍。这是我的错误:

获取书籍不需要Redux操作,只需将连接到Redux的组件置于react中,即可从状态获取书籍

例如:

const library = (props) => {
  // You can access your books here with this.props.books
}

const mapStateToProps = (state) => {
  return {books: this.state.books}
}

const mapDispatchToProps = () => {}    

export default connect(mapStateToProps, mapDispatchToProps)(library)
编辑:


您与Redux的交互似乎是在模拟RESTful api,您真的不需要这样做,您只需要执行更新、添加和删除书本操作。如果您希望初始书籍处于状态,则在使用预加载状态参数创建存储时添加它们。

语法错误在哪里抛出?在“GET_BOOK”中您到底想做什么?您还应该发布错误,以便我们更好地了解出了什么问题。语法错误非常普遍。很可能是您没有为对象扩展语法设置transpiler。默认情况下,JS不理解。。。