刷新页面时 CreateAsyncThunk 不起作用

Posted 2023-02-22

【中文标题】刷新页面时 CreateAsyncThunk 不起作用

【英文标题】：CreateAsyncThunk is no working when I refresh the page

【发布时间】：2022-01-16 04:34:18

【问题描述】：

我正在尝试使用 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>
    )

【参考方案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;

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

我不明白有什么区别或您的解决方案是：/

codesandbox.io/s/pedantic-gagarin-u2ic1?file=/src/App.js