状态管理是现代应用程序开发的一个重要方面，在 react native 中，有效管理状态可以显着提高应用程序的性能和可维护性。 zustand 是 react 的简约状态管理库，为处理 react native 应用程序中的状态提供了一个优雅而简单的解决方案。在本博客中，我们将探讨 zustand、它的工作原理以及为什么它可能是您的 react native 项目的正确选择。
zustand 是一个小型、快速且可扩展的 react 应用程序状态管理解决方案。它的名称源自德语中的“国家”一词，反映了其主要功能：有效管理国家。 zustand 因其简单性和易用性而脱颖而出，允许您使用最少的样板代码创建状态存储。
首先，您需要在 react native 项目中安装 zustand。打开终端并运行：
npm install zustand
或
yarn add zustand
zustand 使用存储来管理状态。 store 是一个 javascript 对象，它保存状态并提供更新它的方法。
在 zustand
一套）
目的：更新您商店的状态。
它是如何工作的：您可以使用它来修改状态。您提供一个接收当前状态并返回新状态的函数。
b) 得到
目的：读取商店的当前状态。
工作原理：您可以使用它来访问当前状态以进行阅读或做出决策。
这是创建 zustand 商店和使用的简单示例：
mystore1.jsx
import create from 'zustand';
// create the store
const mystore1 = create((set, get) => ({
items: [], // initial state
// action to fetch items from an api
fetchitems: async () => {
try {
const response = await fetch('https://api.example.com/items'); // replace with your api url
const data = await response.json();
set({ items: data });
} catch (error) {
console.error('failed to fetch items:', error);
}
},
// action to add an item
additem: (item) => set((state) => ({
items: [...state.items, item],
})),
// action to remove an item
removeitem: (id) => set((state) => ({
items: state.items.filter(item => item.id !== id),
})),
// action to get the count of items
getitemcount: () => get().items.length,
}));
export default mystore1;
用法：
应用程序.jsx
import react, { useeffect } from 'react';
import { view, text, button, flatlist, stylesheet } from 'react-native';
import mystore1 from './mystore1'; // adjust the path to where your store file is located
const app = () => {
// destructure actions and state from the store
const { items, fetchitems, additem, removeitem, getitemcount } = mystore1();
// fetch items when the component mounts
useeffect(() => {
fetchitems();
}, [fetchitems]);
const handleadditem = () => {
const newitem = { id: date.now(), name: 'new item' };
additem(newitem);
};
const handleremoveitem = (id) => {
removeitem(id);
};
return (
<view style="{styles.container}"><text style="{styles.header}">item list ({getitemcount()})</text><button title="add item" onpress="{handleadditem}"></button>
<flatlist data="{items}" keyextractor="{(item)"> item.id.tostring()}
renderitem={({ item }) => (
<view style="{styles.item}"><text>{item.name}</text><button title="remove" onpress="{()"> handleremoveitem(item.id)} />
</button></view>
)}
/>
</flatlist></view>
);
};
const styles = stylesheet.create({
container: {
flex: 1,
padding: 16,
},
header: {
fontsize: 24,
marginbottom: 16,
},
item: {
flexdirection: 'row',
justifycontent: 'space-between',
padding: 16,
borderbottomwidth: 1,
borderbottomcolor: '#ccc',
},
});
export default app;
在此示例中：
zustand 支持中间件以增强其功能。例如，您可以使用持久中间件从 asyncstorage/mmkv 保存和加载状态：
a) zustand 与 react native 异步存储
usescansstore.jsx
import asyncstorage from '@react-native-async-storage/async-storage';
import { create } from 'zustand';
import { persist, createjsonstorage } from 'zustand/middleware';
// create the store
export const usescansstore = create()(
persist(
(set, get) => ({
fishes: 0, // initial state
addafish: () => set({ fishes: get().fishes + 1 }) // function to update state
}),
{
name: "food-storage", // key used to store the data
storage: createjsonstorage(() => asyncstorage), // use asyncstorage for persistence
}
)
);
b) zustand 与 mmkv
i) 创建mmkv配置文件storage.jsx
import { mmkv } from "react-native-mmkv";
export const storage = new mmkv({
id: 'my-app-storage',
encryptionkey: 'some_encryption_key'
})
export const mmkvstorage = {
setitem: (key, value) => {
storage.set(key, value)
},
getitem: (key) => {
const value = storage.getstring(key)
return value ?? null
},
removeitem: (key) => {
storage.delete(key)
},
}
ii)usescansstore.jsx
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import mmkvStorage from './mmkvStorage'; // Import the MMKV storage configuration
// Create the store
export const useScansStore = create()(
persist(
(set, get) => ({
fishes: 0, // Initial state
addAFish: () => set({ fishes: get().fishes + 1 }) // Function to update state
}),
{
name: "food-storage", // Key used to store the data
storage: createJSONStorage(() => mmkvStorage), // Use MMKV for persistence
}
)
);
zustand 为 react native 应用程序中的状态管理提供了一种简约且高效的方法。其简单的 api、反应性和中间件支持使其成为管理小型和大型项目状态的绝佳选择。通过遵循本博客中概述的示例和最佳实践，您可以将 zustand 无缝集成到您的 react native 应用程序中，并享受更干净、更可维护的状态管理解决方案。
相关帖子： https://dev.to/ajmal_hasan/react-native-mmkv-5787 https://dev.to/ajmal_hasan/reactotron-setup-in-react-native-redux-applications-4jj3