当前位置： 首页 > news >正文

Redux的简介及其在React中的应用

news 2024/11/7 10:47:55

Redux

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

作用：通过集中管理的方式管理应用的状态。

使用步骤：

  1. 定义一个 reducer 函数 （根据当前想要做的修改返回一个新的状态）；

  2. 使用createStore方法传入 reducer函数 生成一个store实例对象；

  3. 使用store实例的 subscribe方法 订阅数据的变化（数据一旦变化，可以得到通知）；

  4. 使用store实例的 dispatch方法提交action对象 触发数据变化（告诉reducer你想怎么改数据）；

  5. 使用store实例的 getState方法 获取最新的状态数据更新到视图中。

 管理数据流程：

为了职责清晰，数据流向明确，Redux把整个数据修改的流程分成了三个核心概念，分别是：state、action和reducer

  1. state：一个对象 存放着我们管理的数据状态；

  2. action：一个对象 用来描述你想怎么改数据；

  3. reducer：一个函数 根据action的描述生成一个新的state。

 Redux与React环境准备

配套工具

在React中使用redux，官方要求安装俩个其他插件 - Redux Toolkit 和 react-redux。

  1. Redux Toolkit（RTK）- 官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式。

  2. react-redux - 用来 链接 Redux 和 React组件 的中间件。

配置基础环境

  1. 使用 CRA 快速创建 React 项目

    npx create-react-app react-redux

  2. 安装配套工具

    npm i @reduxjs/toolkit react-redux

  3. 启动项目

    npm run start

store目录结构设计

 

  1. 通常集中状态管理的部分都会单独创建一个单独的 store 目录

  2. 应用通常会有很多个子store模块，所以创建一个 modules 目录，在内部编写业务分类的子store

  3. store中的入口文件 index.js 的作用是组合modules中所有的子模块，并导出store

Redux与React 实现counter

 

使用React Toolkit 创建counterStore
// src => store => modules => counterStore.js
import { createSlice } from '@reduxjs/toolkit'const counterStore = createSlice({name: 'counter',//模块的名称// 初始化stateinitialState: {count: 0},// 修改数据的方法，都是同步方法，支持直接修改reducers: {incremnent(state) {state.count++},decrement(state) {state.count--}}
})// 解构出来actionCreater函数
const { incremnent, decrement } = counterStore.actions
// 获取reducer
const reducer = counterStore.reducer// 以按需导出的方式导出actionCreater
export { incremnent, decrement }
// 以默认导出的方式导出reducer
export default reducer
// src => store => index.js
import { configureStore } from "@reduxjs/toolkit";
// 导入子模块reducer
import counterReducer from "./modules/counterStore";const store = configureStore({reducer: {counter: counterReducer}
})export default store
为React注入store

react-redux负责把Redux和React 链接 起来，内置 Provider组件 通过 store 参数把创建好的store实例注入到应用中，链接正式建立。

// src => index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store';
import { Provider } from 'react-redux';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
React组件使用store中的数据

在React组件中使用store中的数据，需要用到一个 钩子函数 - useSelector，它的作用是把store中的数据映射到组件中，使用样例如下：

import { useSelector } from 'react-redux'
function App() {const { count } = useSelector(state => state.counter)return (<div className="App">{count}</div>);
}
export default App;

React组件修改store中的数据

React组件中修改store中的数据需要借助另外一个hook函数 - useDispatch，它的作用是生成提交action对象的dispatch函数，使用样例如下：

import { useSelector, useDispatch } from 'react-redux'
// 导入actionCreater
import { incremnent, decrement } from './store/modules/counterStore'
function App() {const { count } = useSelector(state => state.counter)const dispathc = useDispatch()return (<div className="App"><button onClick={() => dispathc(decrement())}>-</button>{count}<button onClick={() => dispathc(incremnent())}>+</button></div>);
}
export default App;
Redux与React 提交action传参

  • 需求说明：

    组件中有俩个按钮 add to 10 和 add to 20 可以直接把count值修改到对应的数字，目标count值是在组件中传递过去的，需要在提交action的时候传递参数。

  • 提交action传参实现需求：

    • 在reducers的同步修改方法中添加action对象参数；

    • 在调用actionCreater的时候传递参数，参数会被传递到action对象payload属性上。

// src => app.js
import { useSelector, useDispatch } from 'react-redux'
// 导入actionCreater
import { incremnent, decrement, addToNum } from './store/modules/counterStore'
function App() {const { count } = useSelector(state => state.counter)const dispathc = useDispatch()return (<div className="App"><button onClick={() => dispathc(decrement(10))}>-</button>{count}<button onClick={() => dispathc(incremnent(10))}>+</button><button onClick={() => dispathc(addToNum(10))}>add to 10</button><button onClick={() => dispathc(addToNum(20))}>add to 20</button></div>);
}
export default App;
// src => store => counterStore.js
import { createSlice } from '@reduxjs/toolkit'
const counterStore = createSlice({name: 'counter',//模块的名称// 初始化stateinitialState: {count: 0},// 修改数据的方法，都是同步方法，支持直接修改reducers: {incremnent(state) {state.count++},decrement(state) {state.count--},addToNum(state, actions) {state.count = actions.payload}}
})
// 解构出来actionCreater函数
const { incremnent, decrement, addToNum } = counterStore.actions
// 获取reducer
const reducer = counterStore.reducer
// 以按需导出的方式导出actionCreater
export { incremnent, decrement, addToNum }
// 以默认导出的方式导出reducer
export default reducer
Redux与React 异步状态操作

 异步操作步骤：

  1. 创建store的写法保持不变，配置好同步修改状态的方法；

  2. 单独封装一个函数，在函数内部return一个新函数，在新函数中；

    2.1 封装异步请求获取数据；

    2.2 调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交。

  3. 组件中dispatch的写法保持不变。

import { useSelector, useDispatch } from 'react-redux'
// 导入actionCreater
import { incremnent, decrement, addToNum } from './store/modules/counterStore'
import { useEffect } from 'react'
import { fetchChannelList } from './store/modules/channelStore'
function App() {const { count } = useSelector(state => state.counter)const { channelList } = useSelector(state => state.channel)const dispathc = useDispatch()// 使用useEffect触发异步请求执行useEffect(() => {dispathc(fetchChannelList())}, [])return (<div className="App"><button onClick={() => dispathc(decrement(10))}>-</button>{count}<button onClick={() => dispathc(incremnent(10))}>+</button><button onClick={() => dispathc(addToNum(10))}>add to 10</button><button onClick={() => dispathc(addToNum(20))}>add to 20</button><ul>{channelList.map((item) => (<li key={item.id}>{item.name}</li>))}</ul></div>);
}
export default App;
// src => store => modules => channelStore
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
const channelStore = createSlice({name: 'channel',initialState: {channelList: []},reducers: {setChannels(state, actions) {state.channelList = actions.payload}}
})
// 异步请求部分
const { setChannels } = channelStore.actions
const fetchChannelList = () => {return async (dispathc) => {const res = await axios.get('http://geek.itheima.net/v1_0/channels')dispathc(setChannels(res.data.data.channels))}
}
export { fetchChannelList }
const reducer = channelStore.reducer
export default reducer


http://www.mrgr.cn/news/67427.html

相关文章：

  • 论文阅读--基于MLS点云语义分割和螺栓孔定位的盾构隧道错位检测方法
  • printf影响单片机中断速度
  • Web前端PC端开发者工具详细介绍（约10000字保姆级讲解）
  • RabbitMQ 管理平台（控制中心）的介绍
  • 基于MATLAB的运动车辆跟踪检测系统
  • 使用 ABAP GIT 发生 IF_APACK_MANIFEST dump
  • 想要搭建陪玩系统小程序，这几点不容忽视，陪玩系统源码框架
  • 在Java中抽象类和接口的区别是什么？
  • PySpark本地开发环境搭建
  • 华为机试HJ27 查找兄弟单词
  • 用接地气的例子趣谈 WWDC 24 全新的 Swift Testing 入门（三）
  • FQDN（Fully Qualified Domain Name，完全限定域名）是指能够唯一标识互联网上一台主机的域名
  • （61）使用LMS算法估计线性预测器并计算估计误差的MATLAB仿真
  • .NET 白名单文件通过反序列化执行系统命令
  • PN结特性及反向饱和电流与反向漏电流详解
  • 【机器学习】聚类算法分类与探讨
  • 1.6K+ Star！Ichigo：一个开源的实时语音AI项目
  • 边缘计算的基本概念与实践
  • 探讨Mysql和Redis的数据实时同步方案
  • Java之随机点名器（4）
  • LeetCode题练习与总结：O(1) 时间插入、删除和获取随机元素--380
  • IO模块赋能污水处理
  • 【Git】Liunx环境下Git的使用:“克隆,提交,推送“
  • 基于Jeecgboot3.6.3vue3的flowable流程增加online表单的审批支持（一）整体思路
  • linux arm板启动时间同步服务
  • ATom：来自中央大学高分辨率气溶胶质谱仪（HR-AMS）的 L2 测量数据