Рендеринг объектов из списка с использованием карты не работает

Question

Я новичок в редуксе.Я пытаюсь отобразить список, полученный от props.В моем компоненте List я делаю это:

props.books.clickState.map(book=> {
            return (
                  <li key={book.id}>
                    <Book{...book} />
                  </li>
            );
        })}

Компонент My Book:

const Book= ({ id, title, author, dispatch }) => (
<div>
    <Link to={`/books/${id}`}>
        <h4>{title}</h4>
    </Link>
    <p>Author: {author}</p>
</div>);

Я всегда получаю пустой список,<ul> </ul> Это работало вчера, и я ничего не изменил.Я знаю, что props.books.clickState - это массив из console.log(props.books.clickState)

[EDIT]

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

const Book= ({ id, title, author, dispatch }) => (
    <div>
        <Link to={`/books/${id}`}>
            <h4>{title}</h4>
        </Link>
        <p>Author: {author}</p>
    </div>
);

export default connect()(Book);

DashBoard:

import React from 'react';
import BookList from './BookList ';

const DashBoard = () => (
    <div className='container__list'>
        <BookList />
    </div>
);

export default DashBoard;

BookList:

import React from 'react';
import { connect } from 'react-redux';
import Book from './Book';



const BookList= (props) => (
    <div>
        Book List:
        <ul>
            { console.log(props.books) && Array.isArray(props.books) && props.books.map(book => {
                return (
                      <li key={book.id}>
                        <Book {...book} />
                      </li>
                );
            })}
        </ul>

    </div>
);

const mapStateToProps = (state) => {
    return {
        books: state.clickState
    };
}

export default connect(mapStateToProps)(BookList);

У вас есть идеи?

Спасибо