Добавление объекта в массив reducer redux

Подскажите пожалуйста, как можно добавить объект (книга) в store? При нажатии на order на карточке книги, она должна быть добавлена в store - takenBooks. Эта книга будет значится как взятая и более не доступная. Её статус изменится с available на taken.

введите сюда описание изображения

Весь список книг приходит с api. У каждого объекта книги есть свои свойства id, name, author.

useEffect(() => {
    const fetchData = async () => {
      const res = await fetch(api);
      const response = await res.json();
      dispatch({ type: 'SET_BOOKS', payload: response });
    };
    fetchData();
  }, []);

На каждой карточке на кнопке order висит обработчик takeBook.

const takeBook = (e) => {
    e.preventDefault();
    dispatch({ type: 'TAKE_BOOKS' });
  };

Reducer записан следующим образом.

import { handleActions } from 'redux-actions';
import { TAKE_BOOKS } from '../actionCreator/takenBooks';

const initialState = {
  takenBooks: [],
};
const takenBooksReducer = handleActions(
  {
    [TAKE_BOOKS]: (state) => ({
      ...state,
      takenBooks: [...state.takenBooks, TAKE_BOOKS.newItem],
    }),
  },
  initialState
);
export default takenBooksReducer;

Подскажите, как исправить reducer, чтобы добавлять в takenBooks именно те книги, которые были выбраны?


Ответы (0 шт):