快速使用react 全局状态管理工具--redux
redux
Redux 是 JavaScript 应用中管理应用状态的工具，特别适用于复杂的、需要共享状态的中大型应用。Redux 的核心思想是将应用的所有状态存储在一个单一的、不可变的状态树（state tree）中，状态只能通过触发特定的 action 来更新。
官方文档 https://cn.redux.js.org/tutorials/typescript-quick-start
如果对react 不了解 可以看我其他文章
React 核心语法
1. 核心概念
在开始之前，先了解几个 Redux 的核心概念：
- Store：存储应用的全局状态，应用中只能有一个 store。
- Action：描述发生了什么事情，通常是一个包含
type和payload的对象。 修改的函数 - Reducer：纯函数，接收当前的 state 和 action，返回一个新的 state。主要定义全局修改的函数
- Dispatch：发送 action 到 reducer 以触发状态的变化。(和vuex差不多)
- Middleware：拦截 action，可以用于异步操作（如
redux-thunk）或日志记录。
2. 安装 Redux 和相关工具
你可以使用 npm 或 yarn 来安装 Redux 和 react-redux（React 的绑定库），以及 Redux DevTools 用于调试：
npm install redux react-redux @reduxjs/toolkit
或者：
yarn add redux react-redux @reduxjs/toolkit
@reduxjs/toolkit是 Redux 官方推荐的简化工具包，用于减少 Redux 样板代码，并提供了一些优化的功能。
3. Redux 使用示例
3.1 定义一个 Redux Store
Redux Store 是整个应用状态的存储中心。我们可以使用 configureStore 来创建 Redux store。
也就是pinia 模块化中的index
index.ts
import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
//进行模块导入
reducer: {
// 你的 reducers
}
});
export default store;
3.2 创建 Slice（使用 Redux Toolkit）
createSlice 是 Redux Toolkit 中的一个 API，能够简化 action 和 reducer 的编写。
在counter 目录下新建 counterStore.ts 或者tsx都可以
import { createSlice } from '@reduxjs/toolkit';
// 定义一个 counter 的 slice
const counterStore = createSlice({
name: 'counter', // slice 的进行多环境时候隔离的名称
initialState: { count: 0 }, // 初始状态
reducers: {
// 定义 reducer 方法
increment: (state) => {
state.count += 1; // 直接修改 state
},
decrement: (state) => {
state.count -= 1;
},
reset: (state) => {
state.count = 0;
}
}
});
// 导出 actions 交给具体组件使用
export const { increment, decrement, reset } = counterStore.actions;
// 导出 reducer，供 store index.ts 注册 使用
export default counterStore.reducer;
3.3 将 Slice 合并到 Store
将 counterSlice.reducer 添加到 Redux store 中。
index.ts 此时完成注册 返回注册的配置的store对象
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({
reducer: {
counter: counterReducer, // 将 counterReducer 添加到 store 中
}
});
export default store;
3.4 在 React 中使用 Redux
现在，你可以使用 react-redux 提供的 Provider 组件将 store 注入到 React 组件中。
挂载react 组件数 ,让store范围内的组件 都可以使用 (感觉就像hook中的useContext pro max 版本)
main.tsx
/**
* 是 React 提供的一个开发工具，用于帮助检测应用程序中的潜在问题。它主要用于在开发模式下运行时，对组件进行额外的检查和警告。 不会在生产环境中影响应用程序的性能。
*
* 的主要功能包括：
* 识别不安全的生命周期方法：在 React 16.3 之后，一些生命周期方法被标记为不安全， 可以帮助你识别这些方法的使用。
* 检测过时的字符串 ref API： 会警告你使用过时的字符串 ref API，建议使用函数或 createRef API。
* 检测意外的副作用： 会帮助你检测组件中可能存在的副作用，例如在渲染过程中修改状态或执行其他副作用操作。
* 检测遗留的 context API： 会警告你使用过时的 context API，建议使用新的 context API。
*/
//3.添加到组件树
createRoot(document.getElementById('root')!).render(
<StrictMode>
<Provider store={store}>
<App />
</Provider>
</StrictMode>,
)
3.5 在组件中访问 Redux 状态
为了在 React 组件中访问 Redux 状态，我们可以使用 useSelector 和 useDispatch 钩子。
useSelector: 从 Redux store 中获取选择哪个模块的状态。useDispatch: 用于 dispatch 一个 action，触发状态更新。
新建一个demo 演示组件
import { useSelector, useDispatch } from 'react-redux';
// 导出需要使用的函数
import { increment, decrement, reset } from '../../store/counter/conterStoreUSER.tsx';
function Counter() {
// 使用 useSelector 选择需要的全局存储模块 获取模块当前状态
const count = useSelector((state) => state.counter.count);
// 使用 useDispatch 获取 dispatch 函数 用于传递执行的action
const dispatch = useDispatch();
return (
<div>
<h1>全局技术器Counter: {count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
<button onClick={() => dispatch(reset())}>Reset</button>
<Son></Son>
</div>
);
}
//演示深层 组件也可以获取到全局状态
function Son() {
const count = useSelector((state) => state.counter.count);
return (
<div>
<h1>层级别省的也可以拿到数据Counter: {count}</h1>
</div>
);
}
export default Counter;
main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
// import App from './AppUSER.tsx'
import Counter from './page/test/demo1USER.tsx'
import './index.css'
import store from "./store";
import {Provider} from "react-redux";
createRoot(document.getElementById('root')!).render(
<StrictMode>
<Provider store={store}>
{/*演示成功,此时就已经可以成功使用redux 全局状态管理的功能了,还是相当简单的
目录结构
效果
3.6 使用 Redux DevTools 调试
Redux DevTools 是调试 Redux 状态变化的强大工具，默认情况下与 Redux Toolkit 兼容。
打开浏览器的 Redux DevTools 即可查看 Redux 状态的变化。
4. 优缺点
-
优点
：
- 全局状态管理，适用于复杂的大型应用。
- 状态不可变，调试方便，状态变化容易追踪。
- Redux DevTools 支持时间旅行等调试功能。
-
缺点
- 开发小型应用时可能过于复杂，增加不必要的样板代码。
-
需要理解 actions、reducers 等概念，有一定的学习曲线。
5.其他功能
核心功能就上面 kiit 工具包用后很简单
其他功能可以看官方文档
https://cn.redux.js.org/introduction/why-rtk-is-redux-today