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
CodePudding user response:
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;
CodePudding user response:
Maybe it shows this error because you don't add value in correct manner into the array
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.push(response.data);
state.isLoading = false;
},
},
});
export const { loadData } = dataTableSlice.actions;
export default dataTableSlice.reducer;