使用Redux使用API中的数据创建表

Question

我正试图使用Redux获取有关NBA球队的信息，然后将这些数据放入表格中。现在我可以从API获取数据，但我很难找到正确的语法来显示一个包含我使用Redux收集的数据的表(我通常使用getContext，并试图更多地熟悉Redux(。

这是我的App.js

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getTeams, getTable } from "./features/teams/teamsSlice";
import { Button } from "@mui/material";
import rsLogo from "./logo-with-name.png";
import "./App.css";
function App() {
const dispatch = useDispatch();
const { teams } = useSelector((state) => state.teams);
const { table } = useSelector((state) => state.table);
useEffect(() => {
dispatch(getTeams());
}, [dispatch]);
console.log(teams);
console.log(table);
return (
<div className="App">
<header className="App-header">
<img src={rsLogo} className="App-logo" alt="logo" />
</header>
<main>
<Button
variant="contained"
target="_blank"
onClick={() => dispatch(getTable(teams))}
size="large"
sx={{ m: 2, bgcolor: "#00003C" }}
disableElevation
>
Show Teams
</Button>
{table}
</main>
</div>
);
}
export default App;

这是我的商店.js

import { configureStore } from "@reduxjs/toolkit";
import teamsReducer from "../features/teams/teamsSlice";
const store = configureStore({
reducer: {
teams: teamsReducer,
},
});
export default store;

这是teamsLice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
export const getTeams = createAsyncThunk(
"teams/getTeams",
async (dispatch, getState) => {
return await fetch("https://www.balldontlie.io/api/v1/players").then(
(res) => {
return res.json();
}
);
}
);
const teamsSlice = createSlice({
name: "team",
initialState: {
teams: [],
table: "",
status: null,
},
reducers: {
getTable(teams, action) {
console.log("teams is ", teams);
console.log("action is ", action);
return <div>test</div>;
},
},
extraReducers: {
[getTeams.pending]: (state, action) => {
state.status = "loading";
},
[getTeams.fulfilled]: (state, action) => {
state.status = "success";
state.teams = action.payload;
},
[getTeams.rejected]: (state, action) => {
state.status = "failed";
},
},
});
const { actions, reducer } = teamsSlice;
export const { getTable } = actions;
export default teamsSlice.reducer;

我还没有创建实际的表，我只是试图获得正确的语法，以便能够单击按钮并根据存储中的数据返回表。

有人能告诉我我做错了什么吗？

Answer 1

由于您正在使用redux，并且您的请求不在文件中，因此关注您需要信息的对象的更改非常重要，这是一种方法：

import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getTeams, getTable } from "./features/teams/teamsSlice";
import { Button } from "@mui/material";
import rsLogo from "./logo-with-name.png";
import "./App.css";
function App() {
const dispatch = useDispatch();
const { teams } = useSelector((state) => state.teams);
const { table } = useSelector((state) => state.table);
const [dataTable, setdataTable] = useState([]);
useEffect(() => {
dispatch(getTeams());
}, [dispatch]);
useEffect(() => {
if(table) setdataTable(table);
}, [table])

return (
<div className="App">
<header className="App-header">
<img src={rsLogo} className="App-logo" alt="logo" />
</header>
<main>
<Button
variant="contained"
target="_blank"
onClick={() => dispatch(getTable(teams))}
size="large"
sx={{ m: 2, bgcolor: "#00003C" }}
disableElevation
>
Show Teams
</Button>
{dataTable}
</main>
</div>
);
}
export default App;

这样，当效果检测到该对象发生变化时，它将使其处于存在的状态