CODEWITHSUNDEEP
redux
Alice
Alice

Reputation: 331

Fix Spread syntax error in redux

I am a novice in Redux and I am creating a react book app with redux for state management. As far as I read about redux, it is recommended to use spread syntax to prevent state mutation. In my case, I have 2 default books and I want to output them when the program gets starting. Something goes wrong with the return in case 'GET_BOOK' because I got a syntax error. Any recommendation to reduce my code in bookReducers, I am highly appreciated

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
    }
}

The error occurs in return {...state, books:[...state.books]}; in case GET_BOOK in bookReducers. And here is my error: enter image description here

Upvotes: 0

Views: 72

Answers (1)

Dakota
Dakota

Reputation: 1274

You don't need a Redux action to get books, just have your component in react that connects to redux get the books from the state.

For example:

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)

Edit:

Your interaction with Redux seems like you are trying to mock a RESTful api, you really don't need to do this, you can just have update, add, and delete book actions. If you want initial books in the state then add them when you create the store with the preloaded state parameter.

Upvotes: 1

Related Questions