redux中的复位状态，当发起网络请求时

Question

我正在使用redux工具包。

在<<p> strong> postSlice.js ，有post状态

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
const fetchPosts = createAsyncThunk("Posts/fetchPosts", ({ search }) => {
if (search){
// fetch post with search option
return response.data;
}
// fetch posts
return response.data;
});
const postSlice = createSlice({
name: "Posts",
initialState: {
posts: [],
},
extraReducers: {
[fetchPosts.fulfilled]: (state, action) => {
return { ...state, posts: action.payload.posts };
}
},
});
export default postSlice.reducer;

在索引页我们将表示帖子

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchPosts } from "postSlice";
function Index() {
const dispatch = useDispatch();
const search = // get from url query string
const posts = useSelector(state=>state.posts.posts);
useEffect(() => {
dispatch(fetchPosts({ search }));
}, [dispatch, search]);
return( <div>
// show posts
</div>);
}
export default Index;

在第一个页面加载时，帖子将以redux形式添加到状态。然后，当我输入一个搜索请求时，第一个检索到的帖子仍然存在，而检索到的帖子正在数据库中检索。

实际上，我想显示一个加载旋转器，而张贴的东西(当我做一个搜索请求)。为了显示我检查posts.length在索引页

我试过了。

在postSlice.js中添加resetPostsreducer

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
const fetchPosts = createAsyncThunk("Posts/fetchPosts", ({ search }) => {
if (search){
// fetch post with search option
return response.data;
}
// fetch posts
return response.data;
});
const postSlice = createSlice({
name: "Posts",
initialState: {
posts: [],
},
reducer: {
resetPosts: ( state, action ) => {
return { ...state, posts: [] };
}  
},
extraReducers: {
[fetchPosts.fulfilled]: (state, action) => {
return { ...state, posts: action.payload.posts };
}
},
});
export const { resetPosts } = postSlice.actions;
export default postSlice.reducer;

在调度fetchPosts 之前使用resetPosts

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { resetPosts, fetchPosts } from "postSlice";
function Index() {
const dispatch = useDispatch();
const search = // get from url query string
const posts = useSelector(state=>state.posts.posts);
useEffect(() => {
dispatch(fetchPosts({ search }));
}, [dispatch, search]);
return( <div>
// show posts
</div>);
}
export default Index;

但是这个方法行不通。

Answer 1

就像Mihail Vratchanski说的，你需要一个fetchPosts.pending"减速机。然后，您有两个选项可以知道调用仍然处于挂起状态。

- (Option A) The initial value of the "posts" should be null, and set to null in this reduces. So you know that if the variable is null, you don't have an answer yet. (take in mind that you could get an empty list from a server response).
- (Option B) In this reducer, you can set a loading variable to true. (in the "fetchPosts.fulfilled" reducer set loading variable to false).

的问候Zaquiel

Answer 2

您可以使用取消操作来等待:https://redux-toolkit.js.org/api/createAsyncThunk#type

一样:

const postSlice = createSlice({
name: "Posts",
initialState: {
posts: [],
},
extraReducers: {
[fetchPosts.fulfilled]: (state, action) => {
return { ...state, posts: action.payload.posts };
},
[fetchPosts.pending]: (state, action) => {
state.posts = [];
}
},
});

注:您不需要在reducer中传递新对象。RTK使用Immer，它允许您在您编写的reducer方法中修改对象，然后Immer进行修改并发送新变量。