Redux with getStaticProps

Question

I'm struggling to understand how I can get around this issue?

I want to get data that I can share globally using redux**(using redux as I'm using it for other use cases in my app)**. my problem is I'm using getStaticProps to try and dispatch my ReduxThunk but I can't use Hooks inside getStaticProps and I have no idea what the workaround would be if anyone could point me to some docs I would appreciate it

Slice.js

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


export const fetchData = createAsyncThunk(
  "fetchCoinData",
  async (url, thunkApi) => {
    const data = await fetch(url).then((res) => res.json());
    return data;
  }
);

const initialState = {
  data: [],
  status: null,
};

const getData = {};

export const dataSlice = createSlice({
  name: "datafetch",
  initialState,
  extraReducers: {
    [getData.pending]: (state) => {
      state.status = "Loading!";
    },
    [getData.fulfilled]: (state, { payload }) => {
      state.data = payload;
      state.status = "Sucsess!";
    },
    [getData.rejected]: () => {
      state.status = "Failed";
    },
  },
});

// Action creators are generated for each case reducer function
export const {} = dataSlice.actions;

export default dataSlice.reducer;

cardano.js

import React from "react";
import { useDispatch } from "react-redux";
import BasicCard from "../../Components/UI/Cards/BasicCard";
import { UsersIcon } from "@heroicons/react/outline";
import { fetchData } from "../../redux/slice/DataSlice";


const cardano = (props) => {
  return (
    <div>
      <h1>Header</h1>
    </div>
  );
};
//PROBLEM IS HERE
export async function getStaticProps(context) {
  const dispatch = useDispatch();
  const priceQuery =
    "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Ccardano%2Cethereum&vs_currencies=USD";

  const res = await dispatch(fetchData(priceQuery));

  return {
    props: {
      theData: res,
    }, // will be passed to the page component as props
  };
}

export default cardano;

score 0 · Answer 1 · answered Aug 19 '21 at 23:23

0

To use Hooks, it has to be located at the highest level. Another alternative that you may try is the lifecycle of React. They are the same as Hooks.

answered Aug 19 '21 at 23:23

CodeTech

166
1
8

Personally, I don't think you have to use getStaticProps because you already have the fetchData that you exported. So, you can use your Thunk directly into the Cardano component. Also, I believe you can call your Hooks in Cardano and fetch your data. Try to dispatch inside the cardano. – CodeTech Aug 19 '21 at 23:46
this works exactly how I want it to the way you just described. but for my use case, I need the data globally on my site as it's used elsewhere. so the getStaticProps will ensure it loads globally if that makes sense? – NoobAndroid Aug 19 '21 at 23:52
Just struggling to find any documentation on redux and nextJS together – NoobAndroid Aug 19 '21 at 23:54
Give a read on this post. It might help https://stackoverflow.com/questions/68003562/using-getstaticprops-with-next-redux-wrapper – CodeTech Aug 20 '21 at 23:02

score 0 · Answer 2 · answered Aug 20 '21 at 07:58

For something like this, you probably want to use https://github.com/kirill-konshin/next-redux-wrapper .

Generally you have to be aware though: just putting something in the global state during SSR does not mean your client has it - your client will have it's own Redux state, and each page that is server-side-rendered also has their own isolated Redux state and you will think about what of that you will "hydrate" from the server to the client to make it available there.

The docs of next-redux-wrapper go more into this than I could possibly explain myself, so give those a read!

Redux with getStaticProps

2 Answers2