快速使用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:描述发生了什么事情,通常是一个包含 typepayload 的对象。 修改的函数
  • 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 状态,我们可以使用 useSelectoruseDispatch 钩子。

  • 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}>
            {/**/}
                <Counter />
            </Provider>
         </StrictMode>,

)


演示成功,此时就已经可以成功使用redux 全局状态管理的功能了,还是相当简单的

目录结构
快速使用react 全局状态管理工具--redux_第1张图片

效果

快速使用react 全局状态管理工具--redux_第2张图片

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

你可能感兴趣的:(React,react.js,前端,前端框架)