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

🕗 发布于 2024-11-08 11:09 react.js javascript 前端 Redux store

Redux

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

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

使用步骤：

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

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

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

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

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

管理数据流程：

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

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

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

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

Redux与React环境准备

配套工具

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

Redux Toolkit（RTK）- 官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式。
react-redux - 用来 链接 Redux 和 React组件 的中间件。

配置基础环境

使用 CRA 快速创建 React 项目
```
npx create-react-app react-redux
```
安装配套工具
```
npm i @reduxjs/toolkit react-redux
```
启动项目
```
npm run start
```

store目录结构设计

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

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

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',//模块的名称
  // 初始化state
  initialState: {
    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',//模块的名称
  // 初始化state
  initialState: {
    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 异步状态操作

异步操作步骤：

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

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

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

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

组件中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

原文地址：https://blog.csdn.net/qq_45569925/article/details/143584723

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

云原生之运维监控实践-使用Prometheus与Grafana实现对Nginx和Nacos服务的监测
没有度量就没有改进，实际上，监控系统有以下两个客户：技术，业务。上述内容即是对技术组件的监控，方便技术方面的改进与优化。本文记录了在Docker环境下通过Prometheus和Grafana实现对Ng
阅读更多2024-11-17
GitLab 部署和配置指南
这篇文档详细介绍了GitLab部署的多个方面，包括配置内置Nginx、申请和自动续期HTTPS证书、通过FRP将内网服务映射到外部，以及在阿里云服务器上配置Nginx的反向代理。内容涵盖了FRP客户端
阅读更多2024-11-17
深度学习驱动的蛋白质设计技术与前沿实践-从基础到尖端应用
1、结构生成过程中的物理能量函数与约束2、基于Deep learning的预测模型和生成模型3、结构验证与性能评估五、RFdiffusion基于指定骨架的蛋白质结构设计核心知识点：利用用户提供的特定结
阅读更多2024-11-17
刘艳兵-DBA036-Oracle数据库中的触发器（Trigger）可以在以下哪种情况下自动执行？
刘艳兵-DBA036-Oracle数据库中的触发器（Trigger）可以在以下哪种情况下自动执行？
阅读更多2024-11-17
刘艳兵-DBA037-在ASM实例中，如下哪个参数是必须的？
刘艳兵-DBA037-在ASM实例中，如下哪个参数是必须的？
阅读更多2024-11-17
基于物联网的农业环境监测系统开发（本科毕业论文）
数据访问层通过封装MongoDB的API，提供统一的数据操作接口，确保数据的一致性和安全性。对于大量的监测数据，我们使用了时序数据库InfluxDB进行存储，InfluxDB在处理时序数据方面具有天然
阅读更多2024-11-17
大数据-226 离线数仓 - Flume 优化配置自定义拦截器拦截原理了拦截器实现 Java
前面FlumeAgent的配置使用了本地时间，可能导致数据存放的路径不正确。要解决上面的问题就需要使用自定义拦截器。Agent用于测试自定义拦截器，source => logger sink#
阅读更多2024-11-17
Flutter：key的作用原理（LocalKey ，GlobalKey）
第一段代码实现的内容：创建了3个块，随机3个颜色，每次点击按钮时，把第一个块删除。Flutter中的3棵树中，Widget树和Element树。中有这样一个方法，Flutter的增量渲染就是通过。旧的
阅读更多2024-11-17
vscode 关闭绑定元素隐式具有“any”类型这类错误
出现类型“never”上不存在属性“userName”。ts-plugin(2339) 配置该参数。在vue的项目里面，经常看到any类型的报错，真的很烦的。“noImplicitAny”: fals
阅读更多2024-11-17
Vue 3 插槽详解
默认插槽（Default Slot）用于在子组件中设置一个默认插槽内容，当父组件没有提供内容时会使用这个默认内容。默认插槽非常适合在组件内部提供基本的布局和结构。具名插槽（Named Slot）用于定
阅读更多2024-11-17