Redux Toolkit createAsyncThunk对firestore的请求返回未定义的结果

Question

我正在学习反应，并已开始使用redux、redux工具包和firestore存储数据的个人项目。我在获取和存储数据时遇到了无法解决的问题。完全有可能我对这个问题使用了错误的方法，或者从技术角度来看，我把自己逼到了死胡同(毕竟我是个傻瓜(，所以欢迎任何建议。关于手头的事情。

到目前为止，我所做的一切都是有效的，从某种意义上说，firestore接收请求并按请求存储数据，然而，正如您将在下面的片段中看到的那样，代码在技术上并不正确。我一直在使用redux工具箱中的createAsyncThunk来处理请求，它似乎可以工作，但代码中似乎有点错误。例如，如果我使用setDoc((更新firestore中的字段，则返回值为undefined(即Promise<void>(，如文档所示：https://firebase.google.com/docs/reference/js/firestore_.md#updatedoc我不知道如何处理。Bellow我已经分享了更新用户文档所需的片段。

初始化Firebase并定义更新函数(省略Firebase_CONFIG(：

const app = initializeApp(FIREBASE_CONFIG);
const dbFB = getFirestore(app);
export const updateFB = async (url, id, values) => {
const docRef = doc(dbFB, url, id);
const docResponse = await updateDoc(docRef, values);

return docResponse;
};

定义用户切片(为简洁起见，此处省略configureStore(：

const initialState = {
isLoggedIn: false,
userDetails: null,
};
const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
...
},
extraReducers: (builder) => {
builder.addCase(userUpdate.fulfilled, (state, action) => {
state.userDetails = { ...state.userDetails, ...action.payload };
});
}
});

定义userUpdate操作(requestError调度是对另一个切片的更新(：

export const userUpdate = createAsyncThunk(
'user/userUpdate',
async ({ userId, values }, { dispatch }) => {
try {
const usersRes = await updateFB('/users', userId, values);      
return usersRes;
} catch (err) {
console.log(err);
dispatch(httpActions.requestError({ errorMessage: err.message || 'Something went wrong!'}));
}
}
);

在提交时调用更新请求(使用FormIK(：

<Formik
...
onSubmit={async (values, { setSubmitting }) => {
dispatch(userUpdate({userId: userDetails.userId, values})).then(() => {
setSubmitting(false);
history.push(MY_PROFILE.path);
});
}}
>
{({ isSubmitting }) => (
<Form>
<div className='form-field'>
...
</div>
</Form>
)}
</Formik>

正如您所看到的，在表单提交请求得到解决后，我想继续执行一些其他命令。然而，这个请求的返回值是undefined，在它上面使用.then()感觉不太好，即使它可以工作。也许我已经完全偏离了寻常路？感谢您的帮助：(

Answer 1

正如您所提到的，文档中指出它将返回Promise<void>。背后的原因：这只是发送到服务器的一个简单的文档写入操作。如果它在调用中返回了文档数据，您不仅需要等待数据发送回，而且还将为文档读取和从不需要的带宽收取费用。

如果您需要更新的数据，则需要在单独的调用中使用getDoc()。如果更新多个文档，可能还需要多次getDoc()调用。例如：

export const updateFB = async (url, id, values) => {
const docRef = doc(dbFB, url, id);
const docResponse = await updateDoc(docRef, values);
// Returns updated document.
const docSnap = await getDoc(docRef);
console.log(docSnap.data());
return docSnap.data();
};