Redux хранит обновления, но не рендерит в компоненте

Question

Я новичок, чтобы реагировать JS.Я учу редукцию.В следующем примере, который я публикую, я могу вносить изменения в избыточном хранилище.Но это не отражается на компонентах.В этом коде я пытаюсь динамически добавлять и удалять <BookCard /> компонент при операции onClick.

Это мой index.js

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import { createStore } from 'redux';

import App from './App';

import registerServiceWorker from './registerServiceWorker';
import reducer from './store/reducers/books';

//create store
let store = createStore(reducer); // reducer passed as parameter

const app = (
    <Provider store= { store }>
        <App />
    </Provider>
)

ReactDOM.render(app, document.getElementById('root'));
registerServiceWorker();

App.js:

import React, { Component } from 'react';
import Books from './components/containers/Books';

class App extends Component {

  render() {

    return (
     <Books  />
    );
  }
}

export default App;

Books.js (Компонент)

import React, { Component } from 'react';
import BookCard from '../presentationals/BookCard';
import { connect } from 'react-redux';
import * as actions from '../../store/actions/books';
import './Books.css';

//Provider/Container React Component
class Books extends Component {

    render() {
    return(
    <div className="books-container">
          { this.props.books.map((book) => 
    <BookCard 
        key = {book}
        cover={ this.props.cover }
        title={ this.props.title }
        author={ this.props.author }
        link={ this.props.link } 
    />
    )
     }
    </div>     
        );
    }
}

const mapStateToProps = state => {
    return {
        cover: state.cover,
        title : state.title,
        author : state.author,
        link : state.link,
        books : state.books
    }
  };


export default connect(mapStateToProps)(Books);

BookCard.js (Другой компонент)

import React, { Component} from 'react';
import './BookCard.css';
import { connect } from 'react-redux';
import * as actions from '../../store/actions/index';

class BookCard extends Component {

    addClickHandler = () => {
        this.props.add();
    }

    deleteClickHandler = () => {
        this.props.delete()
    }

    render() {

        return(
            <div>
            <img style={{width: 250, height: 323}} src={this.props.cover} />
            <h2>{this.props.title}</h2>
            <h3>{this.props.author}</h3>
            <a href={this.props.link}>{this.props.link}</a>
            <br/>
            <i className="icon fa fa-pencil" aria-hidden="true"></i>
            <i className="icon fa fa-trash" onClick={ this.deleteClickHandler } aria-hidden="true"></i>
            <i className="icon fa fa-plus" onClick={ this.addClickHandler } aria-hidden="true"></i>
          </div>
        );
    }
}

const mapDispatchToProps = dispatch =>  {
    return {
        add : () => dispatch(actions.addBook()),
        delete :() => dispatch(actions.deleteBook())
    }
}

export default connect(null, mapDispatchToProps)(BookCard);

Файл действий books.js:

import * as actionTypes from './actionTypes';

export const addBook = () => {
    return {
        type : actionTypes.ADD_BOOK
    }
}

export const deleteBook = () => {
    return {
        type : actionTypes.DELETE_BOOK
    }
}

Файл редуктора books.js:

import * as actionTypes from '../actions/actionTypes';

// initial state 
const initialState = {
    books : [0,1,2],
    cover: "https://s3.amazonaws.com/titlepages.leanpub.com/reactjsforthevisuallearner/hero?1496374274",
    title: "React.js for the Visual Learner",
    author: "Mike Mangialardi",
    link: "https://leanpub.com/reactjsforthevisuallearner"
}

const reducer = (state = initialState, action) => {
    switch(action.type) {
        case actionTypes.ADD_BOOK :
            let incremented = Object.assign({}, state);
            incremented.books.push(incremented.books.length);
            return incremented;

        case actionTypes.DELETE_BOOK :
            let decremented = Object.assign({}, state);
            decremented.books.pop();
            return decremented;

        default:
            return state;
    }
}

export default reducer;

actionTypes.js

export const ADD_BOOK = 'ADD_BOOK';
export const DELETE_BOOK = 'DELETE_BOOK';

Я пытался получать обновленные реквизиты, используя несколько методов жизненного цикла, таких как componentWillRecieveProps() и componentDidUpdated(), но ни один из них не работал.

Я не хочу делать forceUpdate(), так как это всего лишь взлом,Вместо этого будет оценено правильное решение.Спасибо.

Answer 1

Я думаю, что проблема с редуктором.Затем попробуйте это:

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.ADD_BOOK:
      return { ...state, books: state.books.concat(state.books.length) };
    case actionTypes.DELETE_BOOK:
      return { ...state, books: state.books.slice(0, -1) };
    default:
      return state;
  }
};