面对Redux的问题

Question

我正在尝试使用蚂蚁设计创建一个用于库存的表。我已经使用了React Redux来管理几个州。下面是给定的代码

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

切片

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;

存储

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,
  },
});

，一旦我使用使用效果或在组件中与任何其他功能创建我的网页一旦删除创建功能，我的网页就会空白。 我无法分类问题

Answer 1

还原器不能异步。取而代之的是，将异步逻辑移动到异步thunk中，并使用extrareducers参数。

https://redux-toolkit.js.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;

Answer 2

也许它显示此错误，因为您不会以正确的方式添加价值

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;