Returning new store in Redux - reactjs

Question

I'm adding redux to an existing app, and I have trouble updating the state of a component which is subscribed to the store. Minimal chunk with my setup:
DivsContainer.js
const DivsContainer = React.createClass({
propTypes: {
collections : PropTypes.array.isRequired
},
render() {
return (
<div onClick={this.props.onClick}>
{this.props.collections.map((coll, i) => (
<div
key={coll.id}
name={coll.name}
/>
))}
</div>
)
}
})
function mapStateToProps(state, ownProps) {
return {
collections: state.collectionsReducer.collections,
}
}
function mapDispatchToProps (dispatch, ownProps) {
return {
onClick: () => {
dispatch(addCollection())
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(DivsContainer)
Reducers.js
import {combineReducers} from 'redux'
import {ADD_COLLECTION, REMOVE_COLLECTION} from './actions'
const initialState = {
collections: [
{
id: 1,
name: "mock",
}
}
]
}
function collectionsReducer(state = initialState, action) {
switch (action.type) {
case ADD_COLLECTION:
return [
...state,
{
id: action.id,
name: action.name,
}
]
default:
return initialState
}
}
const rootReducer = combineReducers({collectionsReducer})
export default rootReducer
actions.js
export const ADD_COLLECTION = 'ADD_COLLECTION'
let nextCollectionId = 2
export function addCollection() {
return {
type: ADD_COLLECTION,
id: nextCollectionId++,
name: 'mock',
}
}
The reducer is called, so I suspect the problem occurs when returning the new state object (reducers is incorrect) because I get:
Uncaught TypeError: Cannot read property 'map' of undefined render
#DivsContainer.js:

Answer 1

Your reducer is kind of messed up. collectionsReducer returns an array but your initialState is an object with an array in it.
The reducer probably should be:
return {
...state,
collections: [...state.collections, {id: action.id, name: action.name}],
};
and your mapStateToProps should be:
function mapStateToProps(state, ownProps) {
return {
collections: state.collections,
};
}
because you're mapping state to props and your state has the shape of {collections: []} not {collectionsReducer: collections: []}

Answer 2

It is because in your reducer, ADD_COLLECTION is returning an array [something], it is not {collections: something}. So the reducer does not have collections any more, and it complains 'map' of undefined . You need to return {collections: [something]} in your ADD_COLLECTION