无法使用zustand persist中间件

Question

我正在开发一个反应本机应用程序，在添加持久中间件后我收到以下警告。

[zustand persist middleware] 无法更新项目“todos”，给定的存储当前不可用。

这是代码。

import {devtools, persist} from 'zustand/middleware';

const todosStore = set => ({
  todos: [],
  addTodo: todo =>
    set(state => {
      return ({todos: [todo, ...state.todos]});
    }),
});

const useStore = create(
  devtools(
    persist(todosStore, {
      name: 'todos',
      getStorage: () => storage,
    }),
  ),
);

export default useStore;

Answer 1

在持久化中间件中使用 getStorage 现在已被弃用。要解决这个问题，只需通过存储进行更改即可。它使用可以从 zustand/middleware 导入的 createJSONStorage

来自：

getStorage: () => AsyncStorage

致：

storage: createJSONStorage(() => AsyncStorage)

---

这是 MMKV 和 Zustand 的完整使用示例。

如果我没记错的话，您可以简单地创建一个自定义商店，如下所示：

我是为 React Native 做的，但是还有很多其他配置 zustand 的其他框架页面...

// MMKV.ts
import { MMKV } from 'react-native-mmkv';

const storage = new MMKV({
  // ... MMKV configs here ...
});

export default {
  setItem: (name: string, value: string) => storage.set(name, value),
  getItem: (name: string) => storage.getString(name) ?? null,
  removeItem: (name: string) => storage.delete(name)
};

在持久性的配置对象中，你可以这样做：

import { devtools, persist } from 'zustand/middleware';

// ... Store code here ...

const devtoolsConfig: DevtoolsOptions = {
  name: 'my-storage-name',
  enabled: process.env.NODE_ENV === 'development'
};

const persistConfig = {
  name: 'my-storage-persist-name',
  storage: createJSONStorage(() => MMKVStorage),

  // or if you want, you can use AsyncStorage instead of MMKV
  // storage: createJSONStorage(() => AsyncStorage),

  // ... other persist configs here ...
}

const useMyAppStore = create<Store>()(
  devtools(
    persist((set, get) => ({
      // ... Store code here ...
    }), persistConfig),
    devtoolsConfig
  )
);

export default useMyAppStore;

温馨提示：如果您使用React Native，则需要采用JSI架构才能使用MMKV存储。

我希望这有帮助。 让我知道它是否有效

Answer 2

使用react-native-async-storage或任何具有getItem/setItem方法的存储模块将数据存储在react-native本地

import {devtools, persist} from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage'; <-- Add this

const todosStore = set => ({
  todos: [],
  addTodo: todo =>
    set(state => {
      return ({todos: [todo, ...state.todos]});
    }),
});

const useStore = create(
  devtools(
    persist(todosStore, {
      name: 'todos',
      getStorage: () => AsyncStorage, <--- Add This
    }),
  ),
);

export default useStore;