使用 Immer 的 React Hook:use-immer 项目教程
use-immerUse immer to drive state with a React hooks项目地址:https://gitcode.com/gh_mirrors/us/use-immer
1. 项目的目录结构及介绍
use-immer/
├── src/
│ ├── index.js
│ ├── use-immer.js
│ └── example/
│ ├── Form.js
│ ├── TodoList.js
│ └── App.js
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
└── yarn.lock
目录结构介绍
- src/: 包含项目的源代码文件。
- index.js: 项目的入口文件。
- use-immer.js: 实现
useImmer
和useImmerReducer
的核心文件。 - example/: 包含示例代码。
- Form.js: 使用
useImmer
的表单示例。 - TodoList.js: 使用
useImmer
的待办事项列表示例。 - App.js: 示例应用的主组件。
- Form.js: 使用
- .gitignore: Git 忽略文件配置。
- CHANGELOG.md: 项目更新日志。
- LICENSE: 项目许可证。
- README.md: 项目说明文档。
- package.json: 项目依赖和脚本配置。
- tsconfig.json: TypeScript 配置文件。
- yarn.lock: Yarn 包管理器生成的锁定文件。
2. 项目的启动文件介绍
index.js
index.js
是项目的入口文件,负责导出 useImmer
和 useImmerReducer
钩子函数。
export { useImmer } from "./use-immer";
export { useImmerReducer } from "./use-immer";
use-immer.js
use-immer.js
文件实现了 useImmer
和 useImmerReducer
钩子函数,允许在 React 中使用 Immer 来管理状态。
import { useReducer } from "react";
import produce from "immer";
export function useImmer(initialValue) {
const [state, updateState] = useReducer(
(draft, newState) => (typeof newState === "function" ? newState(draft) : newState),
initialValue
);
return [state, updateState];
}
export function useImmerReducer(reducer, initialState, initialAction) {
return useReducer(
(state, action) => produce(state, draft => reducer(draft, action)),
initialState,
initialAction
);
}
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖、脚本和其他元数据。
{
"name": "use-immer",
"version": "0.6.0",
"description": "Use immer to drive state with a React hooks",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/immerjs/use-immer.git"
},
"keywords": [
"immer",
"react",
"hooks"
],
"author": "Michel Weststrate",
"license": "MIT",
"bugs": {
"url": "https://github.com/immerjs/use-immer/issues"
},
"homepage": "https://github.com/immerjs/use-immer#readme",
"peerDependencies": {
"immer": "^7.0.0 || ^8.0.0 || ^9.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
}
tsconfig.json
tsconfig.json
文件是 TypeScript 的配置文件,用于编译 TypeScript 代码。
{
"compilerOptions": {
"target":
use-immerUse immer to drive state with a React hooks项目地址:https://gitcode.com/gh_mirrors/us/use-immer