Facing issue with Redux

Question

I am trying to create a table for inventory using ant design. I have used react redux to manage few states. Below is the given code

import { Table } from 'antd';
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {loadData} from '../../features/DataTableState/DataTableSlice';
const DataTable = () => {

  const gridData = useSelector((state) => state.dataTable.isGridData);
  const isLoading = useSelector((state) => state.dataTable.isLoading);
  const dispatch = useDispatch();

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


  const columns = [
    {
      title:'Id',
      dataIndex:'Id',
      align:'center',
    },
    {
      title:'product',
      dataIndex:'name',
      align:'center',
      editTable:true
    },
    {
      title:'description',
      dataIndex:'email',
      align:'center',
      editTable:true
    },
    {
      title:'inventory',
      dataIndex:'age',
      align:'center',
      editTable:false
    },
    {
      title:'Action',
      dataIndex:'action',
      align:'center',
    }

  ];

  return (
    <div className='data-table'>
     data table
    </div>
  );
}

export default DataTable

Slice

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

export const dataTableSlice = createSlice({
  name: "dataTable",
  initialState: {
    isGridData: [],
    isLoading: false,
  },
  reducers: {
    loadData: async (state) => {
      state.isLoading = true;
      const response = await axios.get(
        "https://jsonplaceholder.typicode.com/comments"
      );
      state.isGridData(response.data);
      state.isLoading = false;
    },
  },
});

export const { loadData } = dataTableSlice.actions;

export default dataTableSlice.reducer;

store

import { configureStore } from "@reduxjs/toolkit";

import menuReducer from "../features/MenuState/menuSlice";
import dataTableReducer from "../features/DataTableState/DataTableSlice";

export default configureStore({
  reducer: {
    menu: menuReducer,
    dataTable: dataTableReducer,
  },
});

As soon as I am using useEffect or creating any other function with in the component my webpage is going blank as soon as I am deleting the created functions the page is going back to normal. I am unable to sort the issue

Answer 1

Reducers cannot be async. Instead, move your async logic into an async thunk and use the extraReducers argument.

https://redux-toolkit.js.org/api/createAsyncThunk

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

export const dataTableSlice = createSlice({
  name: 'dataTable',
  initialState: {
    isGridData: [],
    isLoading: false,
  },
  extraReducers: (builder) => {
    builder
      .addCase(loadData.pending, (state, action) => {
        state.isLoading = true;
      })
      .addCase(loadData.fulfilled, (state, action) => {
        state.isGridData = [...action.payload.data];
        state.isLoading = false;
      });
  },
});

export const loadData = createAsyncThunk('loadData', async () => {
  return await axios.get('https://jsonplaceholder.typicode.com/comments');
});

export default dataTableSlice.reducer;