right now I'm pretty new to react/redux and I'm trying to figure out, why I can't iterate through a bunch of data. The app is very simple:

I'm switching via Link to a page of table-entries -> the data get's loaded and displayed...everything is fine so far. But when creating a new entry and switching back to the previous page with *useNavigate*, I'm getting the following error:

```
Uncaught TypeError: books.books.map is not a function

```

**booksSlice.js:**

```
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from 'axios';

const BASE_URL = 'http://127.0.0.1:8000/api/book/';
const initialState = {
    books: [],
    status: 'idle', //'idle' | 'loading' | 'succeeded' | 'failed'
    error: null
};

export const getBooks = createAsyncThunk('api/book', async (id=null, { rejectWithValue }) => {
    try {
        const response = await axios.get(BASE_URL);
        return response.data.results;
    } catch (err) {
        console.log(err);
        return rejectWithValue(err.response.data);
    }
});

export const postBook = createAsyncThunk('api/book', async(book, { rejectWithValue }) => {
    try {
        const response = await axios.post(BASE_URL, book);
        return response.data;
    } catch (err) {
        console.log(err);
        return rejectWithValue(err.response.data);
    }
});

const booksSlice = createSlice({
    name: 'books',
    initialState,
    extraReducers(builder) {
        builder
            .addCase(getBooks.pending, (state, action) => {
                state.status = 'loading';
            })
            .addCase(getBooks.fulfilled, (state, action) => {
                state.books = action.payload;
                state.status = 'succeeded';
            })
            .addCase(getBooks.rejected, (state, action) => {
                state.status = 'failed';
                state.error = action.error.message;
            })
    }
});

export const selectAllBooks = (state) => state.books;
export default booksSlice.reducer;

```

**booksList.js:**

```
import * as React from 'react';
import { Link } from 'react-router-dom';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getBooks, selectAllBooks } from './booksSlice';

const BooksList = () => {

    const dispatch = useDispatch();
    const books = useSelector(selectAllBooks);

    useEffect(() => {
        dispatch(getBooks());
    }, [dispatch]);

    return(
        <>
            <Stack sx={{ maxWidth: "80%", mx: "auto", mt: "2rem" }} spacing={2} direction="row">
                <Button variant="contained">
                    <Link className="link-create-book" to="create">Create Book</Link>
                </Button>
            </Stack>
            <TableContainer sx={{ maxWidth: "80%", mx: "auto", mt: "2rem" }} component={Paper}>
                <Table aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell>Title</TableCell>
                            <TableCell align="right">Description</TableCell>
                            <TableCell align="right">Author</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        { books.books && books.books.map(item => (
                            <TableRow
                                key={item.id}
                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                            >
                                <TableCell component="th" scope="row">{item.title}</TableCell>
                                <TableCell align="right">{item.description.slice(0, 30)}...</TableCell>
                                <TableCell align="right">{item.full_author_name}</TableCell>
                            </TableRow>
                        )) }
                    </TableBody>
                </Table>
           </TableContainer>
        </>
    )
};
export default BooksList;

```

**booksCreate.js:**

```
import { useState } from "react";
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate } from "react-router-dom";
import { postBook } from './booksSlice';
import { Link } from 'react-router-dom';

const BooksCreate = () => {

    const dispatch = useDispatch();
    const navigate = useNavigate();

    const [title, setTitle] = useState('')
    const [content, setContent] = useState('')
    const [author, setAuthor] = useState('');

    const onTitleChanged = (e) => setTitle(e.target.value);
    const onContentChanged = (e) => setContent(e.target.value);
    const onAuthorChanged = (e) => setAuthor(e.target.value);

    const onSavePostClicked = () => {
        try {
            dispatch(postBook({                    
                title,
                description: content,
                author,
            })).unwrap();

            setTitle('');
            setContent('');
            setAuthor('');
            navigate('/book');
        } catch (err) {
            console.log('Failed to post new book!', err);
        }
    };

    return(
        <section className="create-book-section">
            <h2>Add a new book</h2>
            <form>
                <label htmlFor="postTitle">Title:</label>
                <input type="text" id="postTitle" name="postTitle" value={title} onChange={onTitleChanged} />
                <label htmlFor="postDescription">Description:</label>
                <textarea id="postDescription" name="postDescription" value={content} onChange={onContentChanged} />
            <label htmlFor="postAuthor">Author:</label>
            <input type="text" id="postAuthor" name="postAuthor" value={author} onChange={onAuthorChanged} />
            <Stack sx={{ my: "1rem" }} spacing={2} direction="row">
                <Button variant="contained" onClick={onSavePostClicked} disabled={!canSave} >Create Book</Button>
                <Button variant="contained">
                    <Link className="link-create-book" to="/book">Back to books</Link>
                </Button>
            </Stack>
            </form>
        </section>
    )
};

export default BooksCreate;

```

In addition to that I've tried to console out the *response.data* and after displaying the error messages I can see the new data inside the console, although none of the data is displayed inside my window.
Please let me now if there is any more data you need to see.

Thanks for your help and have a great day!