笔记二十四、剖析Redux的工作流程

╰半橙微兮° 2024-05-01 16:24 97阅读 0赞

### 24.1 定义 ###

>  *  用做于状态管理的第三方 js 库
>  *  react框架中使用，也可应用于其他的框架

使用场景

>  *  组件间需要共享状态和改变另一个组件的状态
>  *  在react项目中可以不使用就尽量不用，复杂场景下才使用

### 24.2 原理图 ![cc693ff55277444fb4a308695ce4cc49.png][] ###

### ![21f7fdc5328244fba6c79df9d17c66d2.png][]24.3 代码 ###

安装

yarn add @reduxjs/toolkit react-redux

先上个组织架构图

![59da6737c8f0472fa7a8bc722dc197c6.png][]

#### 24.3.1 在程序主入口配置store ####

main.jsx

import React from 'react'
    import ReactDOM from 'react-dom/client'
    import App from './App.jsx'
    import './index.css'
    import {Provider} from "react-redux";
    import store from "./store";
    
    ReactDOM.createRoot(document.getElementById('root')).render(
        <React.StrictMode>
            <Provider store={store}>
                <App/>
            </Provider>
        </React.StrictMode>,
    )

#### 24.3.2 新建store ####

store/index.jsx

// store/index.js
    import {configureStore} from "@reduxjs/toolkit";
    // 引入 reducer 函数
    import counterSlice from "./modules/counterSlice";
    
    // 使用configureStore创建一个redux仓库
    // 并自动配置了 Redux DevTools 扩展 ，这样你就可以在开发时调试 store
    export default configureStore({
        reducer: {
            // 告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新
            counter: counterSlice,
        },
    });

#### 24.3.3 新建某个 reducer ####

store/modules/counterSlice.js

//modules/counterSlice.js
    import {createSlice} from "@reduxjs/toolkit";
    
    // 创建react数据切片 利用createSlice()
    export const counterSlice = createSlice({
        // 类似于vuex的命名空间，必须是唯一值
        // 与pinia的defineStore()的第一个参数一个意思，都是唯一值，做区分
        name: "counter",
        // 公共状态
        initialState: {value: 0, list: [1, 1, 1]},
        // 方法
        reducers: {
            // 增加1
            // 方法接收2个参数，第一个参数是变量，第二个参数是载荷(也就是使用方法传入的参数)
            increment: (state) => {
                state.value += 1;
                state.list.push(1);
            },
            // 减少1
            decrement: (state) => {
                state.value -= 1;
                state.list.pop(1);
            }
        },
    });
    
    // 每个 case reducer 函数会生成对应的 Action creators
    export const {increment, decrement} = counterSlice.actions;
    
    export default counterSlice.reducer;

#### 24.3.4 使用 ####

App.jsx

import React from "react";
    import {useSelector, useDispatch} from "react-redux";
    import {decrement, increment} from "./store/modules/counterSlice";
    import Test from "./components/Test/index.jsx";
    
    export default function Person() {
    
        // 拿到store里的数据/状态
        const {value, list} = useSelector((state) => state.counter);
    
        // 通过dispatch调用store里面的方法
        const dispatch = useDispatch();
    
        return (
            <div>
                <h2>Person -- {value}</h2>
                <h2>list -- {list.length}</h2>
                <button onClick={() => dispatch(increment())}>增加</button>
                <button onClick={() => dispatch(decrement())}>减少</button>
                <hr />
                <Test />
            </div>
        );
    }

Test/index.jsx

该组件和 App.jsx 共享 state , App.jsx 调用方法修改数值后,Test 中的数值也跟着发生改变

import React, {Component} from 'react';
    import {useSelector, useDispatch} from "react-redux";
    
    const Test = () => {
        // 拿到store里的数据/状态
        const {value, list} = useSelector((state) => state.counter);
        return (
            <div>
                测试组件:{value},{list.length}
            </div>
        );
    
    };
    export default Test;

[cc693ff55277444fb4a308695ce4cc49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/2e724bb9db2042a5b0f97bd213569918.png
[21f7fdc5328244fba6c79df9d17c66d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/3aeb9f8193c945c8a69d44ed46d25002.png
[59da6737c8f0472fa7a8bc722dc197c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/ac5b13f8dbe945d8848373942aa959da.png