在React reduxjs/toolkit中删除项目后如何刷新页面

Question

我使用的是：

• 反应17.0.2
• TypeScript 4.5.2
• @reduxjs/toolkit：1.6.2

删除项目(对我来说是wordSet(后，我需要更新我的UI。现在，在项目只从数据库中删除并更新UI之后，我必须刷新页面。

你能告诉我如何从UI中删除项目吗？我可以使用wordSets.filter来返回新数组，但这是个好方法吗？

我的代码：

export const deleteWordSet = createAsyncThunk<void, string>(
'wordSet/deleteWordSet',
async (id: string, thunkAPI) => {
try {
const accessToken = getToken();
if (!accessToken) thunkAPI.rejectWithValue('Invalid token');
const config = {
headers: { Authorization: `Bearer ${accessToken}` },
};
await api.delete(`/wordSet/${id}`, config);
} catch (error) {
thunkAPI.rejectWithValue(error);
}
}
);

export const fetchWordSets = createAsyncThunk<IWordSet[]>(
'wordSet/fetchWordSets',
async (_, thunkAPI) => {
try {
const accessToken = getToken();
if (!accessToken) thunkAPI.rejectWithValue('Invalid token');
const config = {
headers: { Authorization: `Bearer ${accessToken}` },
};
const response: IApiResponse<IWordSet[]> = await api.get('/wordSet', config);
const data = response.data.data;
return data;
} catch (error) {
return thunkAPI.rejectWithValue(error);
}
}
);

const WordSetList = () => {
const { wordSets } = useAppSelector(state => state.wordSet);
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(fetchWordSets()).unwrap();
}, [dispatch]);
return (
<div className={styles.container}>
{wordSets.map(wordSet => (
<WordSetListItem key={wordSet._id} {...wordSet} />
))}
</div>
);
};
export default WordSetList;

根据贾马尔的暗示做出了一些改变

现在在我的系统上，我返回被删除单词的id，然后在完成删除工作集时过滤数据。

builder.addCase(deleteWordSet.fulfilled, (state, action) => {
state.isFetching = false;
state.wordSets = state.wordSets.filter(wordSet => wordSet._id !== action.payload);
});

Answer 1

您需要将更新的数据传递给您的reducer，这样UI将在不刷新的情况下得到更新。将更新后的数据作为有效载荷发送，然后根据传递的有效载荷更新减速器的状态。