ReactN助手函数清单setGlobal、addReducer、resetGlobal等10个API速查手册【免费下载链接】reactnReact, but with built-in global state management.项目地址: https://gitcode.com/gh_mirrors/re/reactn 本文带你快速上手ReactN——一个内置全局状态管理的 React 扩展库。无需 Redux 样板代码ReactN 用setGlobal、addReducer、useGlobal等 10 个核心助手函数helper functions即可搞定全局状态初始化、reducer 分发、回调监听与状态重置是 React 全局状态管理的新手友好方案。为什么选择 ReactN 全局状态管理传统方案如 Redux需要配置 store、action、connect 一整套工具链。ReactN 的思路是把全局状态当成 React 原生能力API 命名与useState、useReducer几乎一致你熟悉的 React APIReactN 对应助手函数useStateuseGlobaluseReduceruseDispatchconnectreduxwithGlobal初始化 storesetGlobal/withInit三种组件写法都支持函数组件import { useGlobal } from reactn;类组件把import React from react换成import React from reactn装饰器import reactn from reactn后使用reactn安装只需一行npm install reactn或yarn add reactn。ReactN 十个 API 速查表#函数一句话用途使用场景1setGlobal初始化 / 更新全局状态挂载前、任意位置2getGlobal读取状态快照工具库非组件3resetGlobal一键清空全部状态登出、测试4addReducer/addReducers注册全局 reducer任意位置5addCallback/removeCallback监听状态变化持久化、埋点6getDispatch组件外获取 dispatch工具库7useGlobalHook 读写全局状态函数组件8useDispatchHook 分发 reducer函数组件9withGlobal状态映射为 props高阶组件10withInit挂载前自动初始化Next.js 等1️⃣ setGlobal初始化与更新全局状态最常用的函数等价于类组件的this.setGlobal。参数是部分状态对象会与现有状态合并merge而不是整体替换。import { setGlobal } from reactn; // 建议在 ReactDOM.render 之前完成初始化 setGlobal({ cards: [], count: 0, loading: true });支持传入函数、Promise、甚至异步 fetch 结果可选第二个参数是回调状态写入后执行返回值是一个 Promise可await拿到最新状态源码src/set-global.ts 最佳实践在入口文件如index.tsx挂载前调用保证组件渲染时全局状态已就绪。2️⃣ getGlobal组件外获取状态快照在工具函数、服务类中读取当前状态不会触发组件重渲染import { getGlobal } from reactn; getGlobal().count; // 只读快照⚠️ 组件内请改用useGlobal否则状态变化时组件不会更新。源码src/get-global.ts。3️⃣ resetGlobal一键重置全局状态无任何参数清空所有状态值、回调callbacks、属性监听器与 reducers相当于格式化全局状态import { resetGlobal } from reactn; resetGlobal(); // 之后 getGlobal() 返回空对象典型场景用户登出、测试用例之间的清理。源码src/reset-global.ts。4️⃣ addReducer addReducers注册全局 reduceraddReducer(name, reducer)注册一个具名 reducer之后可用useDispatch(name)或this.dispatch.name()调用import { addReducer, setGlobal } from reactn; setGlobal({ value: 0 }); addReducer(increment, (global, dispatch, x 1) ({ value: global.value x, }));reducer 函数签名固定为(global, dispatch, ...你的参数)只返回变化的属性即可。reducer 还支持asyncawait dispatch.xxx()轻松写出状态机 saga。返回值是一个移除函数调用即可注销该 reduceraddReducers({ addOne, subTwo })是批量注册简写接收整个对象源码src/add-reducer.ts、src/add-reducers.ts5️⃣ addCallback removeCallback监听状态变化每次全局状态改变时都会执行回调回调返回值会被写回全局状态返回null/undefined则不变import { addCallback, setGlobal } from reactn; const remove addCallback((global) { console.log(新状态, global.value); return null; // 不修改状态 }); setGlobal({ value: 1 }); // 触发回调 remove(); // 注销监听⚠️ 注意若回调总返回新状态值会形成无限循环。源码src/add-callback.ts、src/remove-callback.ts。6️⃣ getDispatch组件外分发 reducer返回所有全局 reducer 对应的 dispatch 函数集合专为工具库设计组件内请用useDispatchimport { getDispatch } from reactn; class Helper { add(n) { return getDispatch().increment(n); } }源码src/get-dispatch.ts。7️⃣ useGlobal函数组件读写全局状态与useState手感完全一致的 Hook需 React ≥ 16.8import { useGlobal } from reactn; const [cards, setCards] useGlobal(cards); // 只订阅单个属性 const [global, setGlobal] useGlobal(); // 整个全局状态useGlobal(property)精确订阅某一属性只有它变化时才重渲染返回[值, 设置函数]元组与useState相同源码src/use-global.ts8️⃣ useDispatch函数组件分发 reduceruseReducer的全局版支持 4 种调用姿势调用方式效果useDispatch()拿到全部 reducer 的分发函数映射useDispatch(name)分发addReducer注册的具名 reduceruseDispatch(fn)内联定义全局 reduceruseDispatch(fn, prop)只操作单个属性最像useReducerconst increment useDispatch(increment); increment(4);源码src/use-dispatch.ts。9️⃣ withGlobal把全局状态映射为 props偏好 Reduxconnect风格或纯函数组件时用这个高阶组件import { withGlobal } from reactn; export default withGlobal( (global) ({ value: global.value }), // 状态 → props (setGlobal) ({ // 分发 → props incrementValue: () setGlobal((g) ({ value: g.value 1 })), }) )(MyComponent);源码src/with-global.tsx。 withInit挂载前自动初始化状态在 Next.js 等无法提前执行初始化脚本的框架中用withInit(initialState, initialReducers)包裹App /它会等待状态与 reducer 准备完毕后才挂载子组件import { withInit } from reactn; export default withInit({ count: 0 }, { addOne: ({ count }) ({ count: count 1 }), })(App);源码src/with-init.tsx。新手避坑指南 ❌不要在组件生命周期里初始化全局状态→ 用setGlobal入口文件或withInit❌ 工具函数里用useGlobal/this.global→ 组件外请改用getGlobal/getDispatch⚠️addCallback的返回值会写回状态只读请返回null⚠️removeCallback要求传入同一个函数引用才能成功移除 多全局状态SSR、隔离作用域场景请配合createProvidersrc/create-provider.tsx总结ReactN 状态管理 API 怎么选场景首选 API入口初始化setGlobal或withInit函数组件读写useGlobaluseDispatch类组件读写this.global/this.setGlobal组件外读取getGlobal/getDispatch状态监听、持久化addCallback登出 / 测试清理resetGlobalReactN 的 10 个助手函数覆盖了全局状态管理的全部日常需求命名贴近 React 原生 API零样板代码即可上手。建议配合项目内测试用例tests/目录逐个实验例如tests/set-global.test.ts、tests/add-reducer.test.ts边读边跑一天内即可熟练掌握。【免费下载链接】reactnReact, but with built-in global state management.项目地址: https://gitcode.com/gh_mirrors/re/reactn创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考