前端框架 Redux tool RTK 总结

devtools/2024/11/26 0:14:32/

目录

一、安装依赖

二、创建redux仓库的目录结构

三、createSlice

四、configureStore

五、配置全局仓库标签

六、useSelector

七、useDispatch


Redux Tool官网:Redux - A JS library for predictable and maintainable global state management | Redux

一、安装依赖

# NPM
npm install react-redux @reduxjs/toolkit -S

# Yarn
yarn add react-redux @reduxjs/toolkit

react-redux为redux的核心包,toolkit为redux的工具包。

二、创建redux仓库的目录结构

1、在src目录下创建store目录

在store目录下创建对应的redux仓库。

2、在store目录下创建slices目录

slices目录用于存放不同的slice。

3、最终目录结构如下:

三、createSlice

import {createSlice} from "@reduxjs/toolkit";

const userSlice = createSlice({
    name: "user", //用来自动生成action中的type
    initialState: {
        name: "Jack",
        age: 18,
        sex: 1,
        address: "US"
    }, // state的初始值
    reducers: {  // 指定state的各种操作,直接在对象中添加方法
        setName(state, action) {
            // 可以通过不同的方法,来指定对state不同的操作
            // 两个参数: state 这是state的一个代理对象,可以直接修改
            state.name = "诛八界"
        },
        setAge(state, action) {
            state.age = action.payload
        }
    }
})

// 切片对象会自动地帮我们生成action
// action中的存储的slice自动生成action创建器(函数),调用函数后会自动创建action对象
// action对象结构:{type:name/函数名,payload:函数的参数}
const {setName, setAge} = userSlice.actions;

const nameAction = setName("哈哈")
const ageAction = setAge(30)
console.log(nameAction)
console.log(ageAction)

打印:

Slice一般这样书写到一个单独的文件里:

javascript">import {createSlice} from "@reduxjs/toolkit";const userSlice = createSlice({name: "user", //用来自动生成action中的typeinitialState: {name: "Jack",age: 18,sex: 1,address: "US"}, // state的初始值reducers: {  // 指定state的各种操作,直接在对象中添加方法setName(state, action) {// 可以通过不同的方法,来指定对state不同的操作// 两个参数: state 这是state的一个代理对象,可以直接修改state.name = "诛八界"},setAge(state, action) {state.age = action.payload}}
})// 切片对象会自动地帮我们生成action
// action中的存储的slice自动生成action创建器(函数),调用函数后会自动创建action对象
// action对象结构:{type:name/函数名,payload:函数的参数}
export const {setName, setAge} = userSlice.actions;
export default userSlice;

四、configureStore

configureStore用于创建Redux集中管理仓库。

在store的index文件下书写如下:

javascript">import {configureStore} from "@reduxjs/toolkit";
import userSlice from "./slices/userSlice";const store = configureStore({reducer: {userData: userSlice.reducer// config: configSlice.reducer}
})export default store;

五、配置全局仓库标签

引入redux里的Provider标签,使用Provider标签来包裹软件根标签。

javascript">import {Provider} from "react-redux";
import store from "./store";<Provider store={store}><App/>
</Provider>

六、useSelector

useSelector用来加载state中的数据,

javascript">import React from "react";
import {useSelector} from "react-redux";function App() {//useSelector用于加载state中的数据// 注意: state.reducer的名称而不是slice的nameconst user = useSelector(state => state.userData)return (<><div className="App">{JSON.stringify(user)}</div></>);
}

页面效果:state中的值被读取到了。

对于需要使用多个state里reducer的情况,可以像以下简写:

const {user,config} = useSelector(state => state) //直接解构获取

七、useDispatch

通过userDispatch钩子函数获取派发器对象。

javascript">import {useDispatch, useSelector} from "react-redux";
import {setAge, setName} from "./store/slices/userSlice";function App() {const user = useSelector(state => state.userData)// 通过userDispatch()获取派发器对象。const dispatch = useDispatch()const changeUser = () => {dispatch(setName())dispatch(setAge(22))}return (<><div className="App">{JSON.stringify(user)}<button onClick={changeUser}>修改</button></div></>);
}

点击修改后页面state发生改变了:dispatch(action函数(payload参数))

甚至你这样写依然可以正常执行:

dispatch({type:"user/setAge",payload:22}) //但不推荐这样写,容易写错参数

总结到此!


http://www.ppmy.cn/devtools/136973.html

相关文章

gitHub常用操作

gitHub常用操作 1、把项目拉下来2、添加上游仓库3、进入分支4、从上游仓库拉取更新 1、把项目拉下来 在对应项目的右上角点击fork&#xff0c;fork下来&#xff1a;将远程仓库复制到个人仓库 在创建好的分支文件夹下使用 git clone自己远程仓库下的http地址&#xff08;fork…

手机发展史介绍

手机&#xff0c;这个曾经在电影和科幻小说中出现的高科技产品&#xff0c;如今已经渗透进了我们生活的每个角落。从单纯的通讯工具到如今集成了通讯、娱乐、工作、社交等多种功能的智能终端&#xff0c;手机的发展史也是人类科技进步的缩影。本文将从手机的发展历程、技术革新…

在 ARM 平台上如何实现Linux系统的1秒启动

在ARM平台上实现Linux系统的1秒启动&#xff0c;是一项涉及深层次优化的挑战。这不仅需要对系统的各个层面进行精细调整&#xff0c;还需要确保在保持系统稳定性的同时&#xff0c;实现快速启动。以下是实现这一目标的关键步骤和优化工作&#xff1a; 1. 精简U-Boot启动过程 …

MySQL底层概述—1.InnoDB内存结构

大纲 1.InnoDB引擎架构 2.Buffer Pool 3.Page管理机制之Page页分类 4.Page管理机制之Page页管理 5.Change Buffer 6.Log Buffer 1.InnoDB引擎架构 (1)InnoDB引擎架构图 (2)InnoDB内存结构 (1)InnoDB引擎架构图 下面是InnoDB引擎架构图&#xff0c;主要分为内存结构和磁…

LLM: AI Mathematical Olympiad (下)

文章目录 一、SC-TIR策略&#xff08;工具整合推理&#xff09;二、SC-TIR原理三、避免过拟合四、代码分析1、Main函数2、SC-TIR control flow3、Extract answer4、Execute completion 总结 本文较长分成两个部分分析 | ू•ૅω•́)ᵎᵎᵎ 第一部分&#xff1a;预备知识介绍和…

k8s 对外服务之 Ingress

LB ingress //Ingress 简介 service的作用体现在两个方面&#xff0c;对集群内部&#xff0c;它不断跟踪pod的变化&#xff0c;更新endpoint中对应pod的对象&#xff0c;提供了ip不断变化的pod的服务发现机制&#xff1b;对集群外部&#xff0c;他类似负载均衡器&#xff0c;…

【SKFramework框架】一、框架介绍

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群&#xff1a;398291828小红书小破站 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 【Unity3D框架】SKFramework框架完全教程《全…

go 结构体指针

在 Go 语言中&#xff0c;结构体指针用于指向结构体的内存地址。使用结构体指针可以避免在函数调用时复制整个结构体&#xff0c;从而提高性能&#xff0c;特别是当结构体较大时。结构体指针还可以方便地修改结构体的字段。 创建结构体指针的方法&#xff1a; 一 使用new创建…