firebase 使用Zustand访问状态存储的对象的方法

syqv5f0l 于 2023-10-22 发布在其他

关注(0)|答案(1)|浏览(250)

我在访问从状态检索的对象的方法时遇到问题。存储对象的正确方法是什么？沿着它的所有方法都处于状态，以便以后可以访问它们。
Store（store.jsx）

import create from "zustand";
import { persist } from "zustand/middleware";
import { cloneDeep } from "lodash";

const initialState = {
  user: undefined,
  profile: undefined,
}

let store = (set) => ({
  ...initialState,
  setUser: (user) => set((state) => ({ user: cloneDeep(user) })),
  setProfile: (profile) => set((state) => ({ profile: profile })),
  logout: () => {set(initialState)},
});
store = persist(store);
export const useUserStore = create(store);

设置状态（file2.jsx）

import { useUserStore } from "../../store";

const setUser = useUserStore((state) => state.setUser);

useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {

     //all properties and methods defined here
      setUser(user);
    return () => unsubscribe();
  }, []);

重新存储状态（file2.jsx）

import { useUserStore } from "../../../store/userStore";

const user = useUserStore((state) => state.user);

//usage, no methods defined at this point.
user.updateEmail() <--- method is not defined

**解决方法/正确实施？？**在auth示例中访问currentUser。

firebase

来源：https://stackoverflow.com/questions/74031008/access-methods-of-an-object-stored-in-state-with-zustand

1条答案

按热度按时间

dgiusagp1#

因为你在持久化数据，所以你在使用JSON。数据以JSON的形式写入（例如）本地存储，并从其中读回。由于函数不能存在于JSON中，因此它们在翻译中会丢失。
您可以使用merge函数将当前状态与持久化状态合并，从而允许您从本地存储中的用户JSON构造用户对象。
您还没有给出用户对象是什么的示例，但我假设它是一个类。因此，你的merge函数可能是这样的：

class User {
  email;
  constructor(email) {
    this.email = email;
  }
  static fromJson(user) {
    return new User(user.email);
  }
  updateEmail() {
    console.log("updating email");
  }
}

// ...
merge: (persistedState, currentState) => {
  currentState.user = User.fromJson(persistedState.user);
  return currentState;
},

现在，如果我们尝试调用user.updateEmail函数，我们不再得到错误，我们看到函数被成功调用。

<button onClick={() => userStore.user?.updateEmail()}>Update</button>

赞(0）回复(0）举报 2023-10-22

我来回答

firebase 使用Zustand访问状态存储的对象的方法

1条答案

相关问题

热门标签

最新问答