无法使用 zustand persist 中间件答案

【问题标题】：Unable to use zustand persist middleware无法使用 zustand persist 中间件
【发布时间】：2022-06-19 02:41:03
【问题描述】：

我正在开发一个 react-native 应用程序，在添加持久性中间件后我得到了以下警告。

[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;

【问题讨论】：

标签： reactjs react-native state-management react-state-management zustand

【解决方案1】：

使用 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;

【讨论】：