redux todo list - stuck with 'map' error - reactjs

Question

I'm learning Redux and doing the basic tutorial, I don't know what happen with map even that I checked carefully.
This is the error:
TypeError: Cannot read property 'map' of undefined
This is my code:
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
}
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state;
}
return {
...state,
completed: !state.completed
};
default:
return state;
}
}
let initialState = []
const todos = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action)
];
case 'TOGGLE_TODO':
return state.map(t => todo(t, action))
default:
return state;
}
}
const visibilityFilter = (state = 'SHOW_ALL', action) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
}
const todoApp = Redux.combineReducers(
todos,
visibilityFilter
)
let nextTodoId = 0
class App extends React.Component {
render() {
return (
<div>
<form>
<input type="text"/>
<button type="submit"
onClick={e => {
e.preventDefault()
store.dispatch({
type: 'ADD_TODO',
text: 'hello',
id: nextTodoId++,
completed: false
})
}}
>
Add Task
</button>
</form>
<ul>
{this.props.todos.map(todo =>
<li key={todo.id}>
{todo.text}
</li>
)}
</ul>
<div>
Show:
{" "}
All
{" . "}
Active
{" . "}
Completed
</div>
</div>
);
}
}
const store = Redux.createStore(todoApp)
const render = () => {
ReactDOM.render(
<App todos={store.getState().todos}/>,
document.getElementById('app')
);
}
store.subscribe(todoApp)
render()
Please help me.

Answer 1

I believe that the main culprit is this:
store.subscribe(todoApp)
Instead it should be this:
store.subscribe(render)
Also you should pass in an object to combineReducer function, like so:
const todoApp = combineReducers({
todos,
visibilityFilter
})
See this link for a working example.

Answer 2

your store.getState() returns undefined.
there is no
store.getState().todos
therefore, you can't map something that undefined.
your store creation is wrong.
to combine a reducers, do it like this. (please note the "{" )
Redux.combineReducers(
{
todos,
visibilityFilter
}
)
your store.subscribe will also provide another error.
it will call the store with action = undefined.
do it with the following method :
(taken from http://redux.js.org/docs/basics/Store.html)
let unsubscribe = store.subscribe(() =>
console.log(store.getState())
)

Answer 3

Perform a check for the todo property before using map as it may be undefined at the initial state
<ul>
{ this.props.todos && this.props.todos.map(todo =>
<li key={todo.id}>
{todo.text}
</li>
)}
</ul>
JSBIN