Skip to content
字数
410 字
阅读时间
2 分钟

redux toolkit

src/

├── features/           # 使用 features 目录划分不同模块
│   └── user/           # 用户模块
│       └── userSlice.js # 使用 createSlice 创建的 slice
│   └── products/       # 产品模块
│       └── productsSlice.js # 产品模块的 slice

├── store/              # Redux store 配置
│   └── store.js        # 使用 configureStore 配置 store

└── components/         # 存放 React 组件
    └── UserComponent.js  # 一个使用 Redux 状态的 React 组件

slice 使用 createSlice 创建, slice 包含 store 中 的 reducer, state 和 flux 中的 actions flux 是一种设计架构, 包含 actions, Dispatcher, store, view, 是单向数据流 useSelector 在 TypeScript 中的典型用法

ts
import { useSelector } from 'react-redux';
import { RootState } from './store';

// 使用 RootState 来指定 Store 类型,number 是返回值类型
const count = useSelector<RootState, number>((state) => state.counter.value);

在 TypeScript 中,调用函数时函数名后的泛型主要用于规定函数参数的类型函数的返回值类型,具体取决于该泛型的定义方式以及函数实现。可以通过泛型来灵活控制参数和返回值类型。

ts
// react-redux 库中的 useSelector 定义
export function useSelector<TState = DefaultRootState, Selected = unknown>(
  selector: (state: TState) => Selected,
  equalityFn?: (left: Selected, right: Selected) => boolean
): Selected;

vuex是可变数据, redux是 不可变数据 https://cn.redux.js.org/tutorials/fundamentals/part-1-overview/#数据流 原生redux

src/

├── actions/            # 存放 action 创建函数
│   └── userActions.js  # 用户相关的 action

├── reducers/           # 存放 reducer
│   └── userReducer.js  # 用户相关的 reducer
│   └── rootReducer.js  # 组合各个 reducer 的 root reducer

├── store/              # 存放 Redux store
│   └── store.js        # Redux store 配置

├── constants/          # 定义 action 类型常量
│   └── actionTypes.js  # 存放所有的 action type 常量

└── components/         # 存放 React 组件
    └── UserComponent.js  # 一个使用 Redux 状态的 React 组件

https://juejin.cn/post/6844904036013965325#heading-5https://juejin.cn/post/6844904013532495885?searchId=202410092228474FBCFDD4ADF1B43A5CC4#heading-7https://juejin.cn/post/7101688098781659172?searchId=20241009225618FC50EEB35E5C5B4370DChttps://juejin.cn/post/7264779043212083240?searchId=20241009225618FC50EEB35E5C5B4370DC#heading-28

贡献者

The avatar of contributor named as sunchengzhi sunchengzhi

文件历史

撰写

布局切换

调整 VitePress 的布局样式,以适配不同的阅读习惯和屏幕环境。

全部展开
使侧边栏和内容区域占据整个屏幕的全部宽度。
全部展开,但侧边栏宽度可调
侧边栏宽度可调,但内容区域宽度不变,调整后的侧边栏将可以占据整个屏幕的最大宽度。
全部展开,且侧边栏和内容区域宽度均可调
侧边栏宽度可调,但内容区域宽度不变,调整后的侧边栏将可以占据整个屏幕的最大宽度。
原始宽度
原始的 VitePress 默认布局宽度

页面最大宽度

调整 VitePress 布局中页面的宽度,以适配不同的阅读习惯和屏幕环境。

调整页面最大宽度
一个可调整的滑块,用于选择和自定义页面最大宽度。

内容最大宽度

调整 VitePress 布局中内容区域的宽度,以适配不同的阅读习惯和屏幕环境。

调整内容最大宽度
一个可调整的滑块,用于选择和自定义内容最大宽度。

聚光灯

支持在正文中高亮当前鼠标悬停的行和元素,以优化阅读和专注困难的用户的阅读体验。

ON开启
开启聚光灯。
OFF关闭
关闭聚光灯。

聚光灯样式

调整聚光灯的样式。

置于底部
在当前鼠标悬停的元素下方添加一个纯色背景以突出显示当前鼠标悬停的位置。
置于侧边
在当前鼠标悬停的元素旁边添加一条固定的纯色线以突出显示当前鼠标悬停的位置。