Question

我是Redux的新手，我正在创建一个带有redux的反应簿应用程序，用于状态管理。据我读到有关redux的建议，建议使用扩展语法来防止状态突变。在我的情况下，我有2个默认书籍，我想在程序启动时输出它们。返回时出现问题＆＃39; GET_BOOK＆＃39;因为我得到了语法错误。任何减少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]};如果是bookReducers中的GET_BOOK。这是我的错误：

Answer 1

你不需要Redux动作来获取书籍，只需让你的组件做出反应，连接到redux就可以从州获得书籍。

例如：

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，您真的不需要这样做，您可以只更新，添加和删除书籍操作。如果您想要状态中的初始书籍，那么在使用预加载状态参数创建商店时添加它们。

修复redux中的Spread语法错误

1 个答案: