React / Redux: вызов GET axios вызывает бесконечный цикл, метод onSubmit не вызывает визуальный вывод для пользователя

Question

После нажатия на кнопку «Отправить» в форме с вложенным действием addBook, данные передаются в БД, но не выводятся сразу на экран (мне приходится обновлять страницу каждый раз, чтобы выводить вновь добавленные данные из БД).

Я пытался поместить функцию getBooks в componentDidUpdate() хук жизненного цикла, но это вызывает бесконечный цикл.

действие getBooks

export const getBooks = () => dispatch => {
 axios.get('https://damianlibrary.herokuapp.com/library')
  .then(res => dispatch({
    type: GET_BOOKS,
    payload: res.data
  }))
};

действие addBook

export const addBook = book => dispatch => {
 axios.post('https://damianlibrary.herokuapp.com/library', book)
  .then(res => dispatch({
   type: ADD_BOOK,
   payload: res.data
  }))
};

bookReducer

const initialState = {
 books: []
}

export default function(state = initialState, action) {
 switch(action.type) {
  case GET_BOOKS:
   return {
    ...state,
    books: action.payload
   };
  case DELETE_BOOK:
   return {
    ...state,
    books: state.books.filter(book => book.book_id !== action.payload)
   };
  case ADD_BOOK:
   return {
    ...state,
    eventDetails: [action.payload, ...state.books]
   };
  default:
   return state;
 }
}

Компонент Form.js

import React, { Component } from 'react';

import { connect } from 'react-redux';
import { addBook, getBooks } from '../../actions/bookActions';

import './Form.css';

class Form extends Component {

state = {
 name: '',
 author: '',
 isbn: ''
}

componentDidMount () {
 this.props.getBooks();
}

onChangeHandler = (e) => {
 this.setState({ [e.target.name]: e.target.value })
};

onSubmitHandler = (e) => {

 const {name, author, isbn} = this.state

      const newBook = {
      name: name,
      author: author,
      isbn: isbn
    }
    this.props.addBook(newBook);

    this.setState({
      name: '',
      author: '',
      isbn: ''
    })
  e.preventDefault();
}

render() {
 const { name, author, isbn } = this.state;

 return (
  <div className='formContainer'>
    <div className='form'>
      <form className='bookForm' onSubmit={this.onSubmitHandler.bind(this)}>
        <div className='inputs'>
          <input 
          type='text' 
          name='name'  
          placeholder='Book name'
          onChange={this.onChangeHandler}
          value={name}/>
          <input 
          type='text' 
          name='author'  
          placeholder='Book author'
          onChange={this.onChangeHandler}
          value={author}/>
          <input 
          type='text' 
          name='isbn'  
          placeholder='ISBN'
          onChange={this.onChangeHandler}
          value={isbn}/>
        </div>
        <div className='buttonSpace'>
          <button>Add book</button>
        </div>
      </form>
    </div>
  </div>
  )
 }

}

const mapStateToProps = (state) => ({
 book: state.book
});

export default connect(mapStateToProps, { addBook, getBooks })(Form);

Answer 1

В редукторе вы должны вернуть обновленный объект редуктора.В ADD_BOOK вы добавляете новое свойство eventDetails.Вы используете это где-нибудь?Ваш новый редуктор выглядит так: {books: [начальный список книг], eventDetails: [начальный список книг и новая книга]}.Когда вы меняете eventDetails на книги в ADD_BOOK, ваш список книг будет обновляться без дополнительных запросов.