Creating table with data from API using Redux

Question

I'm attempting to get information about NBA teams using Redux, then put that data into a table. Right now I'm able to get the data from the API, but I'm struggling to figure out the correct syntax to display a table with the data I collect using Redux (I usually use getContext and am trying to familiarize myself with Redux more).

This is my 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;

This is my store.js

import { configureStore } from "@reduxjs/toolkit";
import teamsReducer from "../features/teams/teamsSlice";

const store = configureStore({
  reducer: {
    teams: teamsReducer,
  },
});

export default store;

And this is teamsSlice.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;

I haven't yet created the actual table, I'm just trying to get the syntax correct for being able to click a button and return a table based on data from the store.

Could anyone tell me what I'm doing wrong?

Uriel Cisneros · Accepted Answer · 2022-07-21 22:55:18Z

1

Since you are using redux and your request is not in the file it is important to keep an eye on changes to the object you need the information for, this is one way to do it:

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;

with this, when the effect detects a change in that object it will put it in the state when it exists

answered Jul 21, 2022 at 22:55

Uriel Cisneros

1264 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheNomadicAspie Over a year ago

Thanks, that seems like it would work but the error I'm getting (And was getting before, sorry should have clarified) is table is undefined. I'm not sure how to initialize that variable properly. Any thoughts what's wrong?

TheNomadicAspie Over a year ago

Realized I needed to not deconstruct the table variable during the const declaration. Thanks so much!

Uriel Cisneros Over a year ago

oh, it's good that the problem is solved, it was a pleasure to help :D

Collectives™ on Stack Overflow

Creating table with data from API using Redux

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related