我正在创建一个NextJs14Electron 商务应用程序,使用Redux工具包进行状态管理.我已经创建了一个片,使用我对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时可以看到它. 问题是,当我try 使用Redux-Toolkit获取它,然后将我的用户状态设置为收到的数据时. 当我在浏览器中判断Redux-DevTools时,我可以看到数据,但它只显示在data属性下,而不是实际更新状态.我不知所措,不知如何前进.如有任何帮助,我们不胜感激.

redux dev tool screenshot

推荐答案

状态100实际正在更新,您可以在dev工具中看到更新后的状态.

100

在完成此fetchUser操作之前,状态中没有data个属性,在这种情况下,减少器 case 将state.data属性设置为等于action.payload.我怀疑您想要将state.user属性设置为操作有效负载中响应JSON的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.payload.message;
        },
      }
    ),
  }),
});

Mongodb相关问答推荐

在对象mongodb的数组中查找元素

如何使用内部数组中的值更新文档

如何判断 mongodb 聚合,该文档具有键,该键是一个数组,其第二个元素是否存在?

Mongodb Timeseries / Golang - ['timestamp' 必须存在并包含有效的 BSON UTC 日期时间值]

Mongodb 按数组元素聚合组

找到一个用户,然后使用 MongoDB 根据他们的总分获得他们的排名

映射数组导致 mongodb 聚合

使用名为 Object 键的 uuid 创建 mongodb 文档

System.FormatException occurred in MongoDB.Bson.dll - XXX is not a valid 24 digit hex string

MongoDB C# 驱动程序 2.0 InsertManyAsync 与 BulkWriteAsync

实现 twitter 和 facebook 之类的主题标签

当属性确实存在时,为什么mongoose模型的 hasOwnProperty 返回 false?

MongoDB:插入重复键更新

Mongo 可尾游标与 Redis 发布/订阅

用 BsonRepresentation(BsonType.ObjectId) vs BsonId vs ObjectId 在 C# 中装饰属性之间的区别

在 Mongo 中存储嵌套类别的最有效方法?

如何按季度分组日期?

MongoDB - 投影一个并不总是存在的字段

具有 AWS 云形成和自动zoom 的 Mongodb 集群

Mongoimport json 文件更新或覆盖..?