React - Redux使用动作创建器将项目添加到当前状态

时间:2017-03-20 14:51:02

标签: reactjs react-redux

我正在尝试向reducer中的当前状态添加更多项目,但没有获得所需的结果。

我的书籍缩减

export default function() {
  return[
    {title: 'Abc'},
    {title: 'Def'},
    {title: 'Ghi'},
    {title: 'Jkl'}
  ]
}

添加减书员

export default function(state='', action){
  switch(action.type){
    case 'ADD_BOOK':
    console.log(action.payload);
    return [
      ...state,
      state.books.push({'title':'giki'})
    ]
    default:
    return state
  }
  return state;
}

用于组合reducer的代码

const rootReducer = combineReducers({
  books: BooksReducer,
  addBook: AddBookReducer
});

export default rootReducer;

最后在容器内

function mapStateToProps(state){
  return {
    books: state.books
  };
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({addBook: addBook}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(BookList);

在控制台中,我正在

Cannot read property 'push' of undefined

有人可以提供帮助。谢谢!

1 个答案:

答案 0 :(得分:1)

我认为这是因为默认状态没有books数组。尝试创建defaultState = { books: [] }之类的默认状态,然后使用export default function(state = defaultState, action){...}

更新您的图书缩减器

编辑: 进一步看你的问题,整本书都是一个阵列,所以我不认为上面的内容是可行的。尝试将减速器中的第7行更改为state.push({'title':'giki'})