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