字数

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 中的典型用法

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

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

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

// 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

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名