جلب البيانات من الخادم بواسطة redux toolkit

السلام عليكم.

أواجه مشكل في جلب البيانات من الخادم حيث لايتسنى إظهار هذه البيانات على الواجهة الأمامية إلا بعد تحديث الصفحة.

الكود.

إضافة كتاب (الواجهة الخلفية)

// method   POST 
// route    api/books
// desc     Create new book
// access   Private | admin
const createBook = asyncHandler(async(req, res) => {
    try{
        // Image Validation
        if (!req.file) {
            return res.status(400).json({ message: "no image provided" });
        }

        // Upload Photo
        const imagePath = path.join(__dirname, `../images/${req.file.filename}`);
        const result = await cloudinaryUploadImage(imagePath);

        // Save new post in database
        const book = await Book.create({
            title: req.body.title,
            description: req.body.description,
            category: req.body.category,
            user: req.userId,
            image: {
                url: result.secure_url,
                publicId: result.public_id,
            },
            author: req.body.author,
            language: req.body.language,
            PublicationDate: req.body.PublicationDate,
        });

        // Send response to the client
        res.status(201).json(book);

        // 6. Remove image from the server
        fs.unlinkSync(imagePath);
    } catch (err) {
        console.log(err.message)
        res.status(500).send('Server error')
    }
});

إضافة كتاب الواجهة الأمامية

// bookSlice
getBooks(state, action) {
	state.books = action.payload;
},
setBooks(state, action) {
	state.books = [...state.books, action.payload]
},

// bookApiCall
export function addBook(newBook) {
  return async (dispatch, getState) => {
    try {
      dispatch(bookActions.setLoading())
      const {data} = await axios.post(`${BOOK_URL}`, newBook, {
        headers: {
          "authorization": getState().auth.user.accessToken
        }
      });
      dispatch(bookActions.setBooks(data));
      dispatch(bookActions.clearLoading());
    } catch (error) {
      toast.error(error?.response?.data.message);
      dispatch(bookActions.clearLoading());
    }
  };
}

/**
   * Add New Book
  */
  const [fileName, setFileName] = useState(null);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [category, setCategory] = useState("");
  const [author, setAuthor] = useState("");
  const [PublicationDate, setPublicationDate] = useState("");
  const [language, setLanguage] = useState("");
  const formSubmitHandler = (e) => {
    e.preventDefault();
    if (title.trim() === "") return toast.error("Book Title is required");
    if (category.trim() === "") return toast.error("Book Category is required");
    if (description.trim() === "")
      return toast.error("Book Description is required");
    if (author.trim() === "") return toast.error("Book Author is required");
    if (language.trim() === "") return toast.error("Book Language is required");
    if (PublicationDate.trim() === "")
      return toast.error("Book Publication Date is required");
    if (!fileName) return toast.error("Book Image is required");

    const formData = new FormData();
    formData.append("image", fileName);
    formData.append("title", title);
    formData.append("description", description);
    formData.append("category", category);
    formData.append("author", author);
    formData.append("language", language);
    formData.append("PublicationDate", PublicationDate);

    dispatch(addBook(formData))
    setFileName(null)
    setTitle("")
    setDescription("")
    setCategory("")
    setAuthor("")
    setPublicationDate("")
    setLanguage("")
  };

  /**
   * Fetch All Books With Pagination
  */
  useEffect(() => {
    dispatch(fetchBooks());
  }, [dispatch]);

شكرا على المساعدة.