React redux визуализирует изменение состояния хранилища, затем сразу же обновляет приложение sh до исходного

Question

некоторое время боролся с этим, я следовал всем инструкциям и много раз проверял, вот код:

const CREATE_BOOK = 'CREATE_BOOK';
const REMOVE_BOOK = 'REMOVE_BOOK';

const mapStateToProps = state => ({
  books: state,
});

const createBookAction = book => ({
  type: CREATE_BOOK,
  book,
});

const BookReducer = (state = [], action) => {
  switch (action.type) {
    case CREATE_BOOK:
      return [...state, action.book];
    case REMOVE_BOOK: {
      const index = state.findIndex(action.book);
      return state.slice(0, index).concat(state.slice(index + 1, state.length));
    }
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  books: BookReducer,
});

const store = createStore(rootReducer);

const initialState = {
  title: '',
  category: 'Action',
  id: () => (Math.random() * 100).toFixed(),
}

class BooksForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = initialState;
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const { target: { value }, target: { name } } = event;
    this.setState({
      [name]: value
    })
  }

  handleSubmit() {
    this.props.createBookAction(this.state);
    //this.setState(initialState);
  }

  render(){
    const categories = ['Action', 'Biography', 'History', 'Horror', 'Kids', 'Learning', 'Sci-Fi'];
    const categoriesBox = categories.map(cg => <option key={cg}>{cg}</option>);
    return (
      <form>
        <input name="title" onChange={this.handleChange} type="text" />
        <select name="category" onChange={this.handleChange}>{categoriesBox}</select>
        <button onClick={this.handleSubmit} type="submit">Submit</button>
      </form>
    );
  }
};

const App = props => {
  const { books: { books }, createBookAction } = props;
  return (
    <div>
      <BooksForm books={books} createBookAction={createBookAction} />
    </div>
  );
};

const Container = connect(mapStateToProps, { createBookAction })(App);

const AppWrapper = () => (
  <Provider store={store}>
    <Container />
  </Provider>
);

Дело в том, что под всем этим есть рендер и он должен отобразить список (который также присутствует, но не включен) с новой отправленной книгой. Это происходит в течение секунды, а затем снова возвращается в исходное состояние (без книг). Интересно, если это изменение состояния, но проверил все источники и до сих пор не могу найти то, что мне не хватает. Кроме того, комбинированный редуктор специально.

ОБНОВЛЕНИЕ проверено с помощью redux-logger, и то, что он делает, в основном, когда кнопка нажата, она обновляет состояние, но затем обновляет страницу (и перезапустите приложение), показывая ее как в начальном состоянии.

Answer 1

Хорошо, я решил это. Проблема заключалась в том, что кнопка отправки имела type="submit". Поменял на type="button" и все заработало.

Answer 2

Попробуйте переместить <button onClick={this.handleSubmit} type="submit">Submit</button>

в <form onSubmit={this.handleSubmit}>