我正在使用 redux 工具包创建一个 NextJs 14 电子商务应用程序进行状态管理。我使用我对 RTK 2.0 语法的最佳理解创建了一个切片来调用用户数据,以便将其添加到我的用户状态中。
"use client";
import { buildCreateSlice, asyncThunkCreator } from "@reduxjs/toolkit";
const createSliceWithThunks = buildCreateSlice({
creators: {
asyncThunk: asyncThunkCreator,
},
});
const initialState = {
user: {
_id: "",
fname: "",
lname: "",
email: "",
streetAddress: "",
postalCode: "",
city: "",
county: "",
country: "",
},
loading: false,
error: null,
};
const userSlice = createSliceWithThunks({
name: "user",
initialState,
reducers: (create) => ({
fetchUser: create.asyncThunk(
async (_, thunkApi) => {
const response = await fetch("/api/user");
if (!response.ok) {
throw new Error("Failed to fetch user data");
}
const userData = await response.json();
console.log(userData);
return userData;
},
{
pending: (state) => {
(state.loading = true), (state.error = null);
},
fulfilled: (state, action) => {
state.loading = false;
state.data = action.payload;
},
rejected: (state, action) => {
state.loading = false;
state.error = action.error.message;
},
}
),
}),
});
export const { fetchUser } = userSlice.actions;
export default userSlice.reducer;
这是我的 api/用户路线:
import { connectDb } from "@dbConfig/db";
import User from "@models/UserModel";
import { getServerSession } from "next-auth";
import { NextResponse } from "next/server";
export async function GET(req, res) {
const session = getServerSession(); //using my session data from NextAuth to get email to find user in mongodb
try {
const email = (await session).user.email; //I don't know why prettier formatted this line like this, the code breaks if I change it.
connectDb();
const user = await User.findOne({ email });
console.log(user);
return NextResponse.json({ message: "User found:", user }, { status: 201 });
} catch (error) {
console.log(error);
}
}
调用工作完美,我正在从数据库中获取用户数据,并且当我转到 localhost:3000/api/user 时可以看到它。 问题是当我尝试使用 redux 工具包获取它,然后将我的用户状态设置为收到的数据时。 当我在浏览器中检查 redux 开发工具时,我可以看到数据,但它仅出现在数据选项卡下,而不是实际更新状态。我对如何前进感到茫然。任何帮助表示赞赏。
在完成此
data
操作之前,状态中不存在 fetchUser
属性,在这种情况下,reducer 案例将 state.data
属性设置为等于 action.payload
。我怀疑您想将 state.user
属性设置为操作负载中的 user
属性,例如state.user = action.payload.user;
。
const initialState = {
user: {
_id: "",
fname: "",
lname: "",
email: "",
streetAddress: "",
postalCode: "",
city: "",
county: "",
country: "",
},
loading: false,
error: null,
};
const userSlice = createSliceWithThunks({
name: "user",
initialState,
reducers: (create) => ({
fetchUser: create.asyncThunk(
async (_, thunkApi) => {
try {
const response = await fetch("/api/user");
const userData = await response.json();
return userData;
} catch(error) {
return thunkApi.rejectWithValue(error);
}
},
{
pending: (state) => {
state.loading = true;
state.error = null;
},
fulfilled: (state, action) => {
state.loading = false;
state.user = action.payload.user; // <-- update user property
},
rejected: (state, action) => {
state.loading = false;
state.error = action.error.message;
},
}
),
}),
});