react-redux - ReduxToolkit-CreateAsyncThunk - 异步操作正在工作，但当状态改变时反应应用程序没有更新

Question

嗨，我已经用 react 实现了 Redux 工具包，并在那里应用了 createAsyncthunk 功能，因此操作正常工作，但 react 应用程序没有刷新以反映状态的变化。如果问题存在但问题不存在，我还检查了组件。

在下图中，您可以看到，deleteIssue 操作已成功执行，但应用程序尚未更新组件。您可以在 redux 开发工具中看到 redux 操作，还可以看到应用尚未刷新。

您可以查看下面的屏幕截图以供参考。 redux-state 更改但不更新应用程序以进行状态更改

我还认为问题可能出在状态可变性上，但 immer 会解决这个问题。

我无法解决异步操作正常工作背后的问题 n 状态也在发生变化，但应用程序未针对更新的 redux 状态进行更新。

 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';
// import thunk from 'redux-thunk';

const url = axios.create({baseURL:'http://localhost:3001'});

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


export const getIssues  = createAsyncThunk(
    'issue/getIssues',
    async () => {
        return url.get('/issues').then(res => {

          return res.data;
        });
    }
);

export const addIssue  = createAsyncThunk(
    'issue/addIssue',
    async (issue) => {
        return url.post(`/issues/`,issue).then(res => {
          return res.data;
        });
    }
);

export const updateIssue  = createAsyncThunk(
    'issue/updateIssue',
    async ({issue}) => {
        console.log(issue);
        return url.patch(`/issues/${issue.id}`,issue).then(res => {
          console.log(issue+'reached in');
          return res.data;
        });
    }
);

export const deleteIssue  = createAsyncThunk(
    'issue/deleteIssue',
    async (id) => {
        console.log('in reducer'+id);
        return url.delete(`/issues/${id}`).then(res => {
          console.log(id+'reached in');
          return res.data;
        }).catch(err => console.log(err));
    }
);


const issueSlice = createSlice({
    name:'issue',
    initialState,
    extraReducers:(builder) =>{
         builder.addCase(getIssues.pending,(state) => {
            state.status='loading';
        }).addCase(getIssues.fulfilled,(state,action)=>{
            state.issues = action.payload;
            state.status = 'success';
        }).addCase(getIssues.rejected,(state)=>{
            state.status = 'failed';
        })
        builder.addCase(addIssue.pending,(state)=>{
            state.status='loading'
        }).addCase(addIssue.fulfilled,(state,action)=>{
            action.payload.id=state.issues.length+1;
            state.issues.push(action.payload)
            state.status = 'success';
        }).addCase(addIssue.rejected,(state)=>{
            state.status='failed'
        })

        builder.addCase(updateIssue.pending,(state)=>{
            state.status='loading'
        }).addCase(updateIssue.fulfilled,(state,action)=>{
            state.issues = state.issues.map(issue => issue.id === action.payload.id ? action.payload : issue )
            state.status = 'success';
        }).addCase(updateIssue.rejected,(state)=>{
            state.status='failed'
        })

        builder.addCase(deleteIssue.pending,(state)=>{
            state.status='loading'
        }).addCase(deleteIssue.fulfilled,(state,action)=>{
            const newState = state.issues.filter(issue => issue.id !== action.payload);
            state.issues = newState;
            state.status = 'success';
        }).addCase(deleteIssue.rejected,(state)=>{
            state.status='failed'
        })
    }
});


export default issueSlice.reducer;

List.js - 未实现状态更改的组件

import React,{useEffect} from 'react';
import ListItem from './ListItem';

import { getIssues,deleteIssue } from '../Redux/Reducer/issueReducer';
import { useDispatch,useSelector } from 'react-redux';

const List = () => {  
    const dispatch = useDispatch();
    
        useEffect(() => {
            dispatch(getIssues()); 
        },[dispatch]);
        
        const delHandler = (id) => {
            dispatch(deleteIssue(id));
        }

        
        const realIssues = useSelector(state => state.issue);
        console.log(realIssues);
        const ListContents = realIssues.issues.map(issue => (
            <ListItem key={issue.id} {...issue} onDelete={delHandler}/>
        ));
        
    return(
        <>
        <h1>List</h1>
        {ListContents}
        </>
    )
}

export default List;

该应用程序是一种 CRUD 问题跟踪器应用程序。为后端实现 JSON-server。

我无法解决异步操作正常工作背后的问题 n 状态也在发生变化，但应用程序未针对更新的 redux 状态进行更新。

标签： react-reduxredux-toolkit