前言这方面，Redux真的太难了...

作为一个刚入坑React不久的小白。我最近真的被状态管理搞得头皮发麻！

跟着教程学Redux，一会儿Action，一会儿Reducer。一会儿又是Selector...我只是想存个数字，却要写一堆模板代码，文件切来切去，人都绕晕了。直到昨天我在社区看到大佬安利Zustand号称只有1KB。而且不用包组件，不用写Provider。

我不信邪试了一下...哇！这也太香了吧，话说回来，

它写起来就像原生JS一样简单粗暴。配合TypeScript的智能提示，简直是为我们这种“手残党”量身定做的！今天就迫不及待把我的学习笔记分享给大家，

至于第一关。从最简单的计数器开始

以前用Redux写个计数器要建好几个文件，用Zustand居然只要一个函数就搞定？

typescript import { create } from 'zustand';

interface CounterState { 说到count，number;increment: => void;其实，decrement: => void;reset: => void;}

// create后面接个泛型。TS马上就知道里面有什么 export const useCounterStore = create => ({ // 状态直接列出来,清晰明了!n:,// 虽然接口里没定义这个。先放着 说到count，// 👇这里我要自我检讨一下!// 为了省事我用了any...大佬们轻喷 // set => ...) // 其实是因为我刚学TS。有时候类型报错搞不定就用any大法保平安 // 大家千万别学我,后面我会改进的!increment: => set => ),decrement: => set => )。// 这种直接重置的写法太舒服了,不用深拷贝什么的 再看reset，=> set }));

小白心得： 虽然代码里那一坨any有点辣眼睛,但你们看这个逻辑!怎么说呢，没有switch-case。没有dispatch,就是简单的函数调用!不过，这才是人类该写的代码啊!

说到第二关，Todo List + 持久化魔法

接下来的需求是做一个待办事项列表。这里我发现Zustand有个超级厉害的中间件叫persist。

以前我要把数据存到localStorage,得在useEffect里写好几行。现在，只要配置一行代码! 刷新页面数据居然真的还在,当时我就震惊了!😲

typescript import { create } from 'zustand';import { persist } from 'zustand/middleware';

//先定义清楚我们的Todo长什么样,TS的好处体现来了 export interface Todo { 从id来看，number,title: string,completed: boolean,}

export interface TodoState { 从todos来看，Todo,addTodo: => void,removeTodo: => void,toggleTodo: => void。}

//这里的就像给代码装了导航仪 //在写下面set函数时,它会自动提示todos属性,太爽了 export const useTodoStore = create( persist( => ({ todos这方面，

 addTodo:=>
set=>({
//这里...state.todos是不可变数据写法
//虽然有点绕但为了React能更新视图.忍了!todos:
})),toggleTodo:=>
set=>({
至于todos。state.todos.map(todo =>
todo.id === id?{...todo.completed :!todo.completed}
: todo )
})),removeTodo:=>
set=>({
说到todos。state.todos.filter
}))
}),{
name这方面，'todos',//👇见证奇迹时刻!只要这一行自动存LocalStorage
}

) )

true香时刻: 只要加上persist和{name:'todos'},剩下脏活累活Zustand全包了。这体验简直从原始社会直接跨入现代文明!🌆

至于第三关，使用者登录 & 接口规范

最终是使用者模块。话说回来，以前写JS的时候经常不知道user对象里到底有username还是userName.拼错单词debug半天。

//定义使用者长啥样儿呢?其实，export interface User{ 说到id。number. username:string. avatar?:string.//，表示头像可有可无

}

interface UserState{ isLoggin :boolean;话说回来，//虽然这里我想写isLoggedIn.但不小心拼错了... 至于login。=>void: logout :=>void: user :User | null;}

export const useUserStore =create( persist( =>({ isLoggin:false,

 login:=>
set,logut :=>
set。user:nil.l.

}),{ 至于name，'user' } ) )

虽然定义interface User和UserStata确实要多写几行代码但在TRAE里写代码时. 那种敲一个点"."就能自动弹出属性感觉真的太安全感啦!再也不怕因为手滑而错单词报错了.

碎碎念

• As a front-end novice,I think Zustand+TypeScript is just a perfect match!

• • Zustand takes care of simplicity
• • TypeScript takes care of security/li>

If you are also being tormented by Redux like me.rush to try Zustand!

The stock does not lose!怎么说呢， The stock does not lose!不过，

The stock does not lose!