使用createAsyncThunk进行React Redux更新api

Question

我正在尝试使用createAsyncThunk用React Redux更新api，状态代码是200，但数据没有更新。

Api是用Laravel Passport开发的，使用Postman运行良好。

export const fetchUpdateLead = createAsyncThunk(
'leads/fetchUpdateLead',
async (event) => {
const data = new FormData(event.target);
return await fetch("https://api.test/api/edit/173599", {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
nome_cliente: data.get('name'),
telefono_cliente: data.get('phone')
}),
}).then(
(res) => res.json()
);
});

const leadsSlice = createSlice({
name: "leads",
initialState: {
leads: [],
status: null
},
reducers: {},
extraReducers: {
[fetchUpdateLead.fulfilled]: (state, action) => {
state.status = "updated";
},
}
});
export default leadsSlice.reducer;

Answer 1

好吧，您正在编写的代码只是更新state.status，而不是state.data或其他任何东西。如果你想让它发生，你必须写出来——它不会自己发生。

通常，请注意，这里extraReducers的对象表示法不是推荐的使用方法，您应该使用生成器回调表示法。您可能正在使用过时的文档。

我强烈建议您阅读官方Redux教程中关于使用createAsyncThunk的章节：https://redux.js.org/tutorials/essentials/part-5-async-logic

第7章和第8章在使用RTK查询时可能也会引起你的兴趣，RTK查询可以自动化大部分内容。