快速使用react 全局状态管理工具--redux

news2024/9/21 12:28:02

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

/**
 * <StrictMode> 是 React 提供的一个开发工具，用于帮助检测应用程序中的潜在问题。它主要用于在开发模式下运行时，对组件进行额外的检查和警告。<StrictMode> 不会在生产环境中影响应用程序的性能。
 *
 * <StrictMode> 的主要功能包括：
 * 识别不安全的生命周期方法：在 React 16.3 之后，一些生命周期方法被标记为不安全，<StrictMode> 可以帮助你识别这些方法的使用。
 * 检测过时的字符串 ref API：<StrictMode> 会警告你使用过时的字符串 ref API，建议使用函数或 createRef API。
 * 检测意外的副作用：<StrictMode> 会帮助你检测组件中可能存在的副作用，例如在渲染过程中修改状态或执行其他副作用操作。
 * 检测遗留的 context API：<StrictMode> 会警告你使用过时的 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}>
            {/*<App />*/}
                <Counter />
            </Provider>
         </StrictMode>,

)