React-redux - can't extract part of state - reactjs

Question

There is this action creator:
export function selectBook(book) {
// selectBook is an ActionCreator, it needs to return an action,
// an object with a type property.
return {
type: 'BOOK_SELECTED',
payload: book,
};
}
There's this simple reducer:
export default function() {
return [
{ title: 'Javascript: The Good Parts', pages: 101 },
{ title: 'Harry Potter', pages: 39 },
{ title: 'The Dark Tower', pages: 85 },
{ title: 'Eloquent Ruby', pages: 1 }
];
}
The rest of the code is here:
https://github.com/StephenGrider/ReduxCasts/tree/master/book_list/src
Now, I am playing with it and wanted to return eg. number of characters in the title but first I just want to extract the title in the action creator and display it. I've modified the action creator as follows:
export function selectBook(book) {
// selectBook is an ActionCreator, it needs to return an action,
// an object with a type property.
let title = book.title;
console.log(title);
return {
type: 'BOOK_SELECTED',
payload: book,
count: title
};
}
Afterwards, I'll add methods to 'title' - I just want to access it for now from a component. The console.log(title) above outputs the title correctly. As you can see from the link, it then goes through mapStateToProps and then
<div>Title: {this.props.book.title}</div>
<div>Pages: {this.props.book.pages}</div>
<div>Count: {this.props.book.count}</div>
The first two output fine, as per original code. The third one, Count, does not. The {this.props.book.count} outputs blank.
Sorry for the confusion with multiple titles. Under 'Count' for now, I want to output the title. Once I've done it, I'll change the action creator to count the title's characters.
EDIT:
// State argument is not application state, only the state
// this reducer is responsible for
export default function (state = null, action) {
switch (action.type) {
case 'BOOK_SELECTED':
return { action.payload, action.count };
}
return state;
}
I tried the above but the syntax is wrong.
Some more code (reducers index):
import { combineReducers } from 'redux';
import BooksReducer from './reducer_books';
import ActiveBook from './reducer_active_book';
const rootReducer = combineReducers({
books: BooksReducer,
activeBook: ActiveBook
});
export default rootReducer;
Container with mapStateToProps:
import React, { Component } from 'react';
import { connect } from 'react-redux';
class BookDetail extends Component {
render() {
if (!this.props.book) {
return <div>Select a book to get started.</div>;
}
return (
<div>
<h3>Details for:</h3>
<div>Title: {this.props.book.title}</div>
<div>Pages: {this.props.book.pages}</div>
<div>Count: {this.props.book.count}</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
book: state.activeBook
};
}
export default connect(mapStateToProps)(BookDetail);

Answer 1

In a reducer you need to augment the state object to reflect the new payload you have sent. Not sure what your requirement is, but I guess you just want to return the an object with title, pages and count in the reducer.
You are getting the error in your reducer as indeed there is a syntax error.
The correct implementation if I understand the requirement right would be:-
export default function (state = null, action) {
switch (action.type) {
case 'BOOK_SELECTED':
return { title: action.payload.title,
pages: action.payload.pages,
count: action.count };
}
return state;
}
Another thing I would like to say is that you are anyways passing book in the payload then why do you need to pass the count separately, as it can easily be inferred from the book object.
Your action could be:-
export function selectBook(book) {
return {
type: 'BOOK_SELECTED',
payload: book
};
Reducer will be:-
export default function (state = null, action) {
switch (action.type) {
case 'BOOK_SELECTED':
return book;
}
return state;
}

Answer 2

As per advice given in the comments, what it needed is object augmentation:
export default function (state = null, action) {
switch (action.type) {
case 'BOOK_SELECTED':
return { payload: action.payload, count: action.count };
}
return state;
}