function dispatch(action) {
    state = reducer(state, action);
}

const graphqlAPI = (query, variables) => fetch("/graphql", {
    method: "POST",
    body: JSON.stringify({ query, variables })
});

// booksSlice.js
import {
  createEntityAdapter,
  createAsyncThunk,
  createSlice
} from "@reduxjs/toolkit";
// Наш редьюсер будет хранить список книг.
// createEntityAdapter генерирует готовый набор функций
// для добавления, обновления и удаления книг внутри редьюсера
// (addOne, addMany, updateOne, removeOne, setAll, ...),
const books = createEntityAdapter();
// createAsyncThunk позволяет работать с асинхронным кодом.
// Например, с запросами к API.
// getBooks работает как набор actions, которые можно диспатчить в приложении.
export const getBooks = createAsyncThunk("get books", async () =>
  await graphqlAPI(`
    query {
      books  {
        id
        title
      }
    }
  `)
);
export const addBook = createAsyncThunk("add book", ({ title }) =>
  graphqlAPI(`
    mutation ($title: string!){
      add_book(objects: { title: $title }) {
        id
        title
      }
    }
  `, { title })
);
// createSlice — обертка над createAction и createReducer.
// Она позволяет работать со стейтом мутабильно.
export const booksSlice = createSlice({
  name: "books",
  initialState: books.getInitialState(),
  extraReducers: {
    // Работаем с результатом запроса getBooks
    [getBooks.fulfilled]: (state, action) => {
      // setAll автоматически создан в createEntityAdapter
      books.setAll(state, action.payload);
    },
    // Работаем с результатом запроса addBook
    [addBook.fulfilled]: (state, action) => {
      // addOne автоматически создан в createEntityAdapter
      books.addOne(state, action.payload);
    },
  },
});
// createEntityAdapter генерирует набор готовых селекторов
// (selectIds, selectById, selectAll, ...)
export const booksSelectors = books.getSelectors((s) => s.books);
export default booksSlice.reducer;

// index.js
import { useDispatch, useSelector } from "react-redux";
import { getBooks, addBook, booksSelectors } from "./booksSlice";
export function Books() {
  const dispatch = useDispatch();
  // booksSelectors.selectAll втоматически создан через createEntityAdapter
  const books = useSelector(booksSelectors.selectAll);
  useEffect(() => {
    dispatch(getBooks());
  }, [dispatch]);
  return (
    <div>
      <button onClick={() => dispatch(addBook({ title: "New Book" }))}>
        Add book
      </button>
      <ul>
        {books.map((b) => <li key={b.id}>{b.title}</li>)}
      </ul>
    </div>
  );
}