ReduxToolKit | CreateEntityAdaptor userSelectors.selectAll giving Cannot read properties of undefined (reading 'map')

Question

Hi i am using ReduxToolKit CreateEntityAdaptor for crud, when i get all users from API by using userSelectors.selectAll, it gives "Cannot read properties of undefined (reading 'map')".

let me show my API response.

{
    "data": [
        {
            "id": 16,
            "name": "Admin",
            "email": "admin@admin.com",
            "assigned_roles": [
                "Administrator"
            ],
            "created_at": "2022-10-06T20:08:32.000000Z"
        }
    ],
    "links": {
        "first": "http://laravel-api.test/api/users?page=1",
        "last": "http://laravel-api.test/api/users?page=1",
        "prev": null,
        "next": null
    },
    "meta": {
        "current_page": 1,
        "from": 1,
        "last_page": 1,
        "links": [
            {
                "url": null,
                "label": "&laquo; Previous",
                "active": false
            },
            {
                "url": "http://laravel-api.test/api/users?page=1",
                "label": "1",
                "active": true
            },
            {
                "url": null,
                "label": "Next &raquo;",
                "active": false
            }
        ],
        "path": "http://laravel-api.test/api/users",
        "per_page": 15,
        "to": 1,
        "total": 1
    }
}

using AsyncThunk for getting data from API services/userService file

import { createAsyncThunk} from "@reduxjs/toolkit"; import axios from "axios"; import { API_URL, ACCESS_TOKEN } from "../constants";

 export const  fetchUsers =  createAsyncThunk(
     'user/fetchUsers',
     async (page) => {
     const data = await axios(API_URL+'/users?page='+page,
       {   method:'GET',
           headers: {
             'Content-Type': 'application/json',
             'Authorization': `Bearer ${ACCESS_TOKEN}`
           },
       });
       return data.data;
     }

   )

features/userSlice.js

import { createSlice, createEntityAdapter } from "@reduxjs/toolkit"; import { HTTP_STATUS } from "../constants"; import { fetchUsers } from "../services/userService";

 const userAdapter = createEntityAdapter({
     selectId: (user) => user.id,
 });

 const userSlice = createSlice({
     name: "user",
     initialState: {
         loading: false,
         status: null,
         message: "",
     },
     reducers:{
         pageByNumber: (state,{payload}) => {
           state.page = payload.page
         },
         nextPage: (state, {payload}) => {
           state.page = state.page++
         },
         previousPage: (state, {payload}) => {
           state.page = state.page--
         },
         clear: (state) => {
           state.status = null
           state.message = null
         }
       },
     extraReducers: {
       [fetchUsers.pending]: (state, action) => {
         state.loading = true
         state.status = HTTP_STATUS.PENDING
       },
       [fetchUsers.fulfilled]: (state, { payload }) => {
         console.log(payload.data);
         state.loading = false
         state.page = payload.meta.current_page
         state.total_pages = Math.ceil(payload.meta.total/payload.meta.per_page)
         userAdapter.setAll(state, payload.data)
         state.status = HTTP_STATUS.FULFILLED
       },
       [fetchUsers.rejected]: (state, { payload }) => {
         state.loading = false
         state.status = HTTP_STATUS.REJECTED
       },
     },
   });

   export const userSelectors = userAdapter.getSelectors(
     (state) => state.user
     )
   export const {pageByNumber, nextPage, previousPage,clear} = userSlice.actions
   export default userSlice.reducer

views/users/index.js

i am not getting understand why there is map array error.

score 0 · Answer 1 · answered Oct 11 '22 at 07:14

Hi i got the answer actually i had not passed my initial state to create Entity Adapter, below i have shown latest code for initial state.

 initialState: userAdapter.getInitialState({ //Initial state should be wrapped in Adapter
        loading: false,
        status: null,
        message: "",
    }),

ReduxToolKit | CreateEntityAdaptor userSelectors.selectAll giving Cannot read properties of undefined (reading 'map')

1 Answers1