刷新页面时 CreateAsyncThunk 不起作用

Question

我正在尝试使用 reduxjs/tookit 练习 createAsyncThunk。当我第一次从 api 获取数据时，它可以工作，我可以渲染数据。但是，当我刷新页面时，我收到“TypeError: Cannot read properties of undefined (reading 'memes')”错误并且不能再让它工作了。我查找了一些信息，并认为将调度传递为 useEffect 依赖项会有所帮助，但它没有。 当我打开 Redux Devtools 扩展 => diff = 我可以清楚地看到我获取了数据，承诺履行，一切都很好。我尝试将 allMemes 记录到控制台，它显示一个空对象。 p>

store.js

import { configureStore } from "@reduxjs/toolkit";
import memeSlice from "./features/getAllMemes/displayAllMemesSlice";
const store = configureStore({
    reducer:{
        memes:memeSlice
    }
});

export default store;

DisplaySlice.js

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

export const loadAllMemes = createAsyncThunk("getMemes/loadAllMemes", async () => {
     try {
        const response = await fetch("https://api.imgflip.com/get_memes");
        const data = await response.json();
        return data;
    } 
    catch (error) {
        console.log(error)
    }
})

export const memeSlice = createSlice({
    name:"getMemes",
    initialState: {
        isLoading:false,
        hasError:false,
        allMemes:{},
    },

    extraReducers: {
        [loadAllMemes.pending]:(state, action) => {
            state.isLoading = true;
        },
        [loadAllMemes.fulfilled]:(state, action) => {
            state.allMemes = action.payload;
            state.isLoading = false;
        },
        [loadAllMemes.rejected]:(state, action) => {
            state.hasError = true;
            
        }
    }
})
export default memeSlice.reducer;
export const selectAllMemes = state => state.memes.allMemes;

displayAllMemes.js

import React , {useEffect} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { loadAllMemes, selectAllMemes } from './displayAllMemesSlice';

export default function DisplayAllMemes() {

    const allMemes = useSelector(selectAllMemes)
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(loadAllMemes())
        console.log(allMemes)
    }, [dispatch])
    
    return (
        <div>
            {allMemes.data.memes.map(item => (
                <h1>{item.id}</h1>
            ))}
        </div>
    )
}

Answer 1

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

export const loadAllMemes = createAsyncThunk("memes/getAllMemes", async () => {
  try {
    const response = await fetch("https://api.imgflip.com/get_memes");
    const data = await response.json();
    return data;
  } catch (error) {
    console.log(error);
  }
});

export const memeSlice = createSlice({
  name: "memes",
  initialState: {
    isLoading: false,
    hasError: false,
    allMemes: {},
  },

  extraReducers: {
    [loadAllMemes.pending]: (state, action) => {
      state.isLoading = true;
    },
    [loadAllMemes.fulfilled]: (state, action) => {
      const { data, success } = action.payload;
      state.allMemes = data;
      state.isLoading = false;
    },
    [loadAllMemes.rejected]: (state, action) => {
      state.hasError = true;
    },
  },
});

export const {} = memeSlice.actions;
export default memeSlice.reducer;


-- root reducer
import { combineReducers } from "redux";
import memes_slice from "./memes_slice";


const reducer = combineReducers({   
  memes: memes_slice,
});

export default reducer;

-- Component 

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { loadAllMemes } from "../../app/memes_slice";

function Memes() {
  const { allMemes } = useSelector((state) => state.memes);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(loadAllMemes());
  }, [dispatch]);

  console.log(allMemes.memes);

  return <div>Memes</div>;
}

export default Memes;