reduxjs/TOOLK异步Thunk

Question

嗨，伙计们，我刚开始学习应用程序状态管理的reduxjs/工具箱。我创建了处理帖子的简单应用程序。目前，我所做的是使用称为fetchPosts的异步Thunk加载帖子列表。在加载应用程序时，我的异步thunk被调用了两次，我完全不知道要做什么。我使用的是Reactive18.2.0版本，这是我的post切片。

import { createAsyncThunk, createSlice, nanoid } from "@reduxjs/toolkit";
import {sub} from 'date-fns';
import axios from 'axios';

const POST_URL = 'http://jsonplaceholder.typicode.com/posts';


const initialState = {
   posts : [],
   status : 'idle',
   error : null     
 };

export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {

const response = await axios.get(POST_URL);
return response.data;
});

const postsSlice = createSlice({
name: 'posts',
initialState,
reducers:{
    postAdded: {
        reducer(state, action) {
        state.posts.push(action.payload);
        },
        prepare(title,content, userId){
            return {
                payload:{
                    id: nanoid(),
                    title,
                    content,
                    userId,
                    date: new Date().toISOString(),
                    reactions: {
                        thumbsUp: 0,
                        wow:0,
                        heart:0,
                        rocket:0,
                        coffee:0
                    }
                }
            }
        }
    },
    reactionAdded(state, action) {
        const {postId, reaction} = action.payload;
        const existingPost = state.posts.find(post => post.id === postId);
        if (existingPost) {
            existingPost.reactions[reaction]++;
        }
    }
},
extraReducers(builder){
    builder.addCase(fetchPosts.pending, (state, action) => {
        state.status = 'loading';
        
    })
    .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        let min = 1;
        const loadedPosts = action.payload.map(post => 
            {
                post.date = sub(new Date(), {minutes: min++}).toISOString();
                post.reactions = {
                    thumbsUp: 0,
                    wow: 0,
                    heart:0,
                    rocket:0,
                    coffee:0
                }
                return post;
            });
        state.posts = loadedPosts;
    })
    .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message
    })
}
});

export const {postAdded,reactionAdded} = postsSlice.actions;
export const selectAllPosts = (state) => state.posts.posts;
export const getPostsStatus = (state) => state.posts.status;
export const getPostsError = (state) => state.posts.error;
export default postsSlice.reducer;

这是我的邮政列表组件。

import React from 'react'
import { useSelector, useDispatch } from 'react-redux';
import { selectAllPosts, getPostsError, getPostsStatus, fetchPosts } from './postsSlice';
import { useEffect } from 'react';
import PostExcerpt from './PostExcerpt';
const PostsList = () => {
const dispatch = useDispatch();

const posts = useSelector(selectAllPosts);
const postStatus = useSelector(getPostsStatus);
const postError = useSelector(getPostsError);


useEffect(() => {
console.log('post status: ', postStatus);
  if(postStatus === 'idle')
  {
    dispatch(fetchPosts());
  }
},[postStatus])

let content;
if(postStatus === 'loading'){
console.log('loading');
content = <p>"Loading..."</p>
}
else if(postStatus === 'succeeded'){
console.log('succeded');
const orderedPosts = posts.slice().sort((a,b) => b.date.localeCompare(a.date));
content = orderedPosts.map(post => <PostExcerpt key={post.id} post={post}/>);
}
else if (postStatus === 'failed'){
content = <p>{postError}</p>;
}

return (
<section>
<h2>Posts</h2>
{content}
</section>
);
 }
 export default PostsList

Answer 1

因此，由于在react 18 ->中实现的组件的挂载->卸载->重装载行为，出现了这种情况。