【Redux】Redux 基本使用

1. Redux 快速上手

Redux 是 React 最常用的集中状态管理工具,类似于Vue中的Pinia(Vuex),可以独立于框架运行。

<button id="decrement">-</button>
<span id="count">0</span>
<button id="increment">+</button><script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script><script>// 1. 定义 reducer 函数 // 根据不同的 action 对象,返回不同的 state// state 管理数据的初始状态// action 对象的 type 属性标记需要做的修改操作function reducer (state = { count: 0 }, action) {switch (action.type) {case 'INCREMENT':// state 是对象,所以返回的数据也是对象return { count: state.count + 1 }case 'DECREMENT':return { count: state.count - 1 }default:return state}}// 2. 使用reducer函数生成store实例const store = Redux.createStore(reducer)// 3. 通过 store 实例的 subscribe 订阅数据变化// 回调函数在每一次 state 发生变化时自动执行store.subscribe(() => {console.log(store.getState())document.getElementById('count').innerText = store.getState().count})// 4. 通过 store 的 dispatch 函数提交 action 的更改状态const inBtn = document.getElementById('increment')inBtn.addEventListener('click', () => {// 匹配的是 action 对象,所以传入 action 对象store.dispatch({type: 'INCREMENT'})})// 减const dBtn = document.getElementById('decrement')dBtn.addEventListener('click', () => {store.dispatch({type: 'DECREMENT'})})
</script>

2.png

2. React 中使用 Redux

2.1 配制环境

  1. Redux Toolkit(RTK)- 官方推荐编写Redux逻辑的方式,简化书写方式
  2. react-redux - 用来链接 Redux 和 React组件的中间件
npx create-react-app react-redux-demo
npm i @reduxjs/toolkit  react-redux 

2.2 使用 RTK

创建 counterStore

// @/store/modules/counterStore.js
import { createSlice } from '@reduxjs/toolkit'const counterStore = createSlice({// 模块名称唯一name: 'counter',// 初始 stateinitialState: {count: 1},// 修改数据的同步方法 支持直接修改reducers: {increment (state) {state.count++},decrement(state){state.count--},addToNum(state, action) {state.count = action.payload}}
})
// 解构出 actionCreater 函数
const { increment,decrement, addToNum } = counterStore.actions// 获取 reducer 函数
const counterReducer = counterStore.reducer// 导出
export { increment, decrement, addToNum }
export default counterReducer
// @/store/modules/channelStore.js
import { createSlice } from "@reduxjs/toolkit"
import axios from "axios"const channelStore = createSlice({name: 'channel',initialState: {channelList: []},reducers: {setChannels (state, action) {state.channelList = action.payload}}
})// 异步请求部分
const { setChannels } = channelStore.actionsconst fetchChannlList = () => {return async (dispatch) => {const res = await axios.get('http://geek.itheima.net/v1_0/channels')dispatch(setChannels(res.data.data.channels))}
}export { fetchChannlList }const reducer = channelStore.reducerexport default reducer
// @/store/index.js
import { configureStore } from '@reduxjs/toolkit'import counterReducer from './modules/counterStore'export default configureStore({reducer: {// 注册子模块counter: counterReducer}
})

为 React 注入 store

// @/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
// 导入store
import store from './store'
// 导入store提供组件Provider
import { Provider } from 'react-redux'ReactDOM.createRoot(document.getElementById('root')).render(// 提供store数据<Provider store={store}><App /></Provider>
)

在 React 组件中使用修改 store 中的数据

// App.js
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
// 导入actionCreater
import { inscrement, decrement, addToNum } from './store/modules/counterStore'
import { fetchChannlList } from './store/modules/channelStore'function App () {// useSelector 函数将 store 中的数据映射到组件中 counter 是 store 名字const { count } = useSelector(state => state.counter)const { channelList } = useSelector(state => state.channel)const dispatch = useDispatch()// 使用useEffect触发异步请求执行useEffect(() => {dispatch(fetchChannlList())}, [dispatch])return (<div className="App"><button onClick={() => dispatch(decrement())}>-</button>{count}<button onClick={() => dispatch(inscrement())}>+</button>{/* 变为10 和 变为20 */}<button onClick={() => dispatch(addToNum(10))}>add To 10</button><button onClick={() => dispatch(addToNum(20))}>add To 20</button><ul>{channelList.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>)
}export default App

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/193164.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java - 位运算的基本原理和用途

Java - 位运算的基本原理和用途 前言一. Java 位运算基本操作1.1 按位与 &1.2 按位或 |1.3 按位异或 ^1.4 按位取反 ~1.5 位移运算1.5.1 左移运算符 <<1.5.2 右移运算符 >>1.5.3 无符号右移运算符 >>> 二. 位运算实际运用2.1 判断奇偶性&#xff08;&…

SpringSecurity5|12.实现RememberMe 及 实现原理分析

security/day08 这个功能大家还熟悉么&#xff1f;我们在登录网站的时候&#xff0c;除了让你输入用户名和密码&#xff0c;还会有个勾选框&#xff1a; 记住我&#xff01;&#xff01;&#xff01;不是让大家记住我哈。 值得一提的是&#xff0c;Spring Security 也提供了这个…

(C++)字符串相加

愿所有美好如期而遇 题目链接&#xff1a;415. 字符串相加 - 力扣&#xff08;LeetCode&#xff09; 思路 我们看到字符串长度可能到达一万&#xff0c;而且不允许使用处理大整数的库&#xff0c;也就是说&#xff0c;转成整数相加后再转成字符串是不可行的。 那么我们就让…

LCD1602显示自定义字符

代码&#xff1a; #include <LiquidCrystal_I2C.h> LiquidCrystal_I2C lcd(0x27, 16, 2); //根据lcd1602的地址修改0x27. dht DHT; byte degree[8] {B00100, B01010, B10001, B10101, B10101, B01110, B00100,B00100 }; //自定义字符的2进制数据 byte customCh…

从0开始学习JavaScript--JavaScript 数字与日期

JavaScript中的数字和日期是处理数值计算和时间相关任务的核心。本文将深入研究JavaScript中数字的表示、常见运算&#xff0c;以及日期对象的创建、格式化等操作&#xff0c;并通过丰富的示例代码&#xff0c;可以更全面地了解和应用这些概念。 JavaScript数字基础 JavaScri…

Shell脚本:Linux Shell脚本学习指南(第一部分Shell基础)一

你好&#xff0c;欢迎来到「Linux Shell脚本」学习专题&#xff0c;你将享受到免费的 Shell 编程资料&#xff0c;以及很棒的浏览体验。 这套 Shell 脚本学习指南针对初学者编写&#xff0c;它通俗易懂&#xff0c;深入浅出&#xff0c;不仅讲解了基本知识&#xff0c;还深入底…

Python中,我们可以使用pandas和numpy库对Excel数据进行预处理,包括读取数据、数据清洗、异常值剔除等

文章目录 一、什么是数据预处理二、对excel数据进行详细的数据预处理操作总结 一、什么是数据预处理 数据预处理是一种对数据进行清洗、整理、转换等操作的过程&#xff0c;旨在提高数据质量&#xff0c;使其适应模型的需求&#xff0c;从而改进数据挖掘或机器学习的结果。 数…

如何在企业签名、超级签名、tf签名之间做选择

企业签名 (Enterprise Signing): 用途&#xff1a; 适用于企业内部发布应用&#xff0c;不需要经过App Store审核&#xff0c;可以通过企业内部渠道直接分发给员工或内部用户。限制&#xff1a; 仅限于企业内部使用&#xff0c;无法在App Store上发布或向外部用户分发。 超级签…

Alien Skin Exposure2024胶片滤镜中文免费版插件

Exposure是一个在你的照片上实现完整个人看法的终极工具。它是一个完整、强大、多才多艺的照片编辑器和组织者&#xff0c;并且带有你在市场上任何软件中都找不到的独特功能。 Alien Skin Exposure是我处理图片主要的一款软件。Exposure整体界面非常直观&#xff0c;而且操作易…

Linux常用命令——bye命令

在线Linux命令查询工具 bye 命令用于中断FTP连线并结束程序。。 补充说明 bye命令在ftp模式下&#xff0c;输入bye即可中断目前的连线作业&#xff0c;并结束ftp的执行。 语法 bye实例 bye在线Linux命令查询工具

多线程Thread(初阶一:认识线程)

目录 一、引用线程的原因 二、线程的概念 三、进程和线程的区别 四、多线程编程 一、引用线程的原因 多任务操作系统&#xff0c;希望系统能同时运行多个任务。所以会涉及到进程&#xff0c;需要对进程进行管理、调度等。 而单任务操作系统&#xff0c;就完全不涉及到进程…

判断序列值是否单调递增 PandasSeries中的方法:is_monotonic_increasing

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 判断序列值是否单调递增 PandasSeries中的方法&#xff1a; is_monotonic_increasing 选择题 请问下列程序运行的的结果是&#xff1a; import pandas as pd s1 pd.Series([1, 2, 5]) prin…