09_Redux的应用

最新推荐文章于 2025-03-10 17:42:19 发布
最新推荐文章于 2025-03-10 17:42:19 发布
阅读量760 收藏 2
点赞数 1
分类专栏： React 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42152058/article/details/130583429
版权
文章详细介绍了Redux的状态管理框架，包括其基本概念、应用实例（如求和案例的纯React版本和Redux版本）、react-redux的使用，以及如何优化容器组件和UI组件的交互，强调了Redux在处理状态变化和页面更新中的作用，并提供了使用react-redux连接组件和store的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、什么是redux?

二、redux的应用

2.1 求和案例

2.1.1 纯react版本

2.1.2  redux版本

（1）测试版本

（2）正式版本

三、react-redux

3.1 react-redux的使用

1. UI组件：compoents，不能使用任何redux的api，只负责页面的呈现和交互等

2. 容器组件：container，负责和redux通信，数据获取、状态更新，将结果交给UI组件

3.2 案例的优化

3.2.1  mapDispatchToProps的简化

3.2.1  页面重新渲染问题

3.2.3 容器组件的store

3.2.4  整合UI组件和容器组件

一、什么是redux?

redux是一个专门用于做状态管理的JS库(不是react插件库)

redux独立所有组件存在,集中管理react应用中多个组件共享的状态

二、redux的应用

2.1 求和案例

2.1.1 纯react版本

  • Count组件
import React, { Component } from "react"
import "./index.css"
export default class Count extends Component {
  state = { count: 0 }
  addNum = () => {
    const { value } = this.selectNumber
    const { count } = this.state
    this.setState({ count: count + value * 1 })
  }
  //减法
  subNum = () => {
    const { value } = this.selectNumber
    const { count } = this.state
    this.setState({ count: count - value * 1 })
  }
  //奇数加
  addNumIfodd = () => {
    const { count } = this.state
    if (count % 2 !== 0) {
      this.addNum()
    }
  }
  //异步加
  addNumAsync = () => {
    setTimeout(() => this.addNum(), 1000)
  }
  render() {
    const { count } = this.state
    return (
      <div>
        <h3>
          当前求和为：<span>{count}</span>
        </h3>
        <select
          name="select"
          id=""
          ref={(c) => (this.selectNumber = c)}
        >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>

        <button onClick={this.addNum}>+</button>
        <button onClick={this.subNum}>-</button>
        <button onClick={this.addNumIfodd}>当前求和为奇数加</button>
        <button onClick={this.addNumAsync}>异步加</button>
      </div>
    )
  }
}

h3 {
  margin: 10px 20px;
}
select {
  margin: 0 20px;
  height: 30px;
  width: 100px;
}
button {
  font-size: 16px;
  margin: 0 10px;
  padding: 5px 10px;
}

2.1.2  redux版本

npm i redux

（1）测试版本

  • store.js

        该文件专门用于暴露一个store对象，整个应用只要一个store对象

  • 引入createStore,专门用于创建redux中最为核心的store对象
import { createStore } from "redux"

//引入为Count组件服务的reducer
import countReducer from "./count_reducer"
export default createStore(countReducer)

注意：'createStore' is deprecated，createStore被弃用，改用configureStore

configureStore写法

1. 下载依赖

npm install @reduxjs/toolkit

2. configureStore具体写法

import countReducer from "./count_reducer"
import { configureStore } from "@reduxjs/toolkit"
export default configureStore({
  reducer: countReducer,
})
  • count_reducer.js
  1. 该文件时用于创建一个为Count组件服务的reducer，reducer的本质是一个函数
  2. reducer会接到两个参数，分别为：之前的状态 preState，动作对象 action
  3. reducer用于初始化状态和加工状态
  4. reducer第一次被调用时store自动触发
    1. 传递的preState:undefined
    2. 传递的action:@@REDUX/INIT
const initState = 0
export default function countReducer(preState = initState, action) {
  // console.log(preState)
  //判断初始化 if (preState === undefined) preState = 0
  //从action对象中获取type，data
  const { type, data } = action
  //根据type决定如何加工数据
  switch (type) {
    case "add":
      // console.log("add")
      return preState + data
    case "sub":
      return preState - data
    default:
      return preState
  }
}
  •  Count组件

Action

  1. 描述对 store 数据的更改操作，把数据从应用传到store。
  2. 它必须包含一个 type 字段，必须与reducer中的type对应。
  3. dispatch将action发送到reducer ,然后reducer函数根据匹配规则进状态更新
  • 加法
addNum = () => {
    const { value } = this.selectNumber
    //通知redux + value, dispatch分发
    store.dispatch({ type: "add", data: value * 1 })
 
  }
  •  奇数加
addNumIfodd = () => {
    //如何获取count?
    const count = store.getState()
    if (count % 2 !== 0) {
      this.addNum()
    }
  }
  • 页面获取count 

问题：rudux只更改状态，页面并未发生更新，所以需要手动

方法一

在Count组件的componentDidMount，通过subscribe订阅，检测redux中状态的变化，只要变化就调用render。但不能直接调用render，通过 setState 之后必调用 render。

componentDidMount() {
    store.subscribe(() => {
      //console.log("@")
      this.setState({})
    })
  }

方法二

在入口文件index.js，检测store中状态的改变，根据Reaact的DOM的Diffing算法，只会局部更新

import store from "./redux/store"
store.subscribe(() => {
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )
})
  •  Count组件完整代码
import React, { Component } from "react"
import "./index.css"
//用于获取store中的状态
import store from "../../redux/store"
export default class Count extends Component {
  addNum = () => {
    const { value } = this.selectNumber
    //  通知redux加value,dispatch分发
    store.dispatch({ type: "add", data: value * 1 })
    //并未发生更新，rudux只更改状态，不更新页面
  }
  //减法
  subNum = () => {
    const { value } = this.selectNumber
    store.dispatch({ type: "sub", data: value * 1 })
  }
  //奇数加
  addNumIfodd = () => {
    //如何获取count
    const count = store.getState()
    if (count % 2 !== 0) {
      this.addNum()
    }
  }
  //异步加
  addNumAsync = () => {
    setTimeout(() => this.addNum(), 500)
  }
  render() {
    return (
      <div>
        <h3>
          当前求和为：<span>{store.getState()}</span>
        </h3>
        <select
          name="select"
          id=""
          ref={(c) => (this.selectNumber = c)}
        >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>

        <button onClick={this.addNum}>+</button>
        <button onClick={this.subNum}>-</button>
        <button onClick={this.addNumIfodd}>当前求和为奇数加</button>
        <button onClick={this.addNumAsync}>异步加</button>
      </div>
    )
  }
}

（2）正式版本

  • constant.js

        该模块式用于定义type类型的常量值，便于管理，防止单词拼写错误。将所有需要的type进行修改。

export const ADD = "add"
export const SUB = "sub"
  • count_action.js

        该文件为Count组件创建action对象

import { ADD, SUB } from "./constant"
export const addAction = (data) => ({
  type: ADD,
  data,
})
export const subAction = (data) => ({
  type: SUB,
  data,
})
  • Count组件
//引入actionCreator,用于创建action对象
import { addAction, subAction } from "../../redux/count_action"
  • 加法
addNum = () => {
    const { value } = this.selectNumber
    store.dispatch(addAction(value * 1))
  }

补充：同步Action/异步Action

1. Object{}，一般对象---同步Action

2. function{}，函数类型---异步Action

  • 异步Action,也就是返回值为函数，且能开启异步任务
  • 延迟的动作不想交给组件自身，想交给Action完成。想要对状态做出改变，但具体数据靠异步完成。
  • 异步Action一般都会调用同步Action
  • 异步Action不是必须要用的
export const addAsyncAction = (data, time) => {
  return (dispatch) => {
    //异步任务
    setTimeout(() => {
      dispatch(addAction(data))
    }, time)
  }
}

//异步加
  addNumAsync = () => {
    const { value } = this.selectNumber
    store.dispatch(addAsyncAction(value * 1, 500))
  }

注意：

报错内容：Actions must be plain objects. Instead, the actual type was: 'function'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions.

解决方案一

npm install redux-thunk
  • store.js
import { createStore, applyMiddleware } from "redux"
import thunk from "redux-thunk"
//引入为Count组件服务的reducer
import countReducer from "./count_reducer"
export default createStore(countReducer, applyMiddleware(thunk))

解决方案二

用configureStore来创建store对象不会发生这种问题

三、react-redux

3.1 react-redux的使用

npm i react-redux

1. UI组件：compoents，不能使用任何redux的api，只负责页面的呈现和交互等

  • 通过props获取数据

2. 容器组件：container，负责和redux通信，数据获取、状态更新，将结果交给UI组件

  • 靠react-redux的connect函数生成的，​​​​使用connect()()创建并暴露一个容器组件（CountContainer）
  • connect(mapStateToProps, mapDispatchToProps)(UI组件)，connect调用的函数返回值依然是函数
  • connect第一次传递两个参数，必须是函数，mapDispatchToProps也可为对象
    • mapStateToProps：映射状态，返回值必须是对象
    • mapDispatchToProps：映射操作状态的方法，返回值必须是对象
    • 返回对象中的key 作为UI组件 props的 key，value作为UI组件的props的 value
  • 容器组件的store是靠props传进入的不是直接引入

CountUI组件---页面结构

import React, { Component } from "react"
import "./index.css"

export default class Count extends Component {
  render() {
    // console.log(this.props)
    const { count } = this.props
    return (
      <div>
        <h3>
          当前求和为：<span>{count}</span>
        </h3>
        <select
          name="select"
          id=""
          ref={(c) => (this.selectNumber = c)}
        >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>

        <button onClick={this.addNum}>+</button>
        <button onClick={this.subNum}>-</button>
        <button onClick={this.addNumIfodd}>当前求和为奇数加</button>
        <button onClick={this.addNumAsync}>异步加</button>
      </div>
    )
  }
}

Count容器组件

1.  引入UI组件

import CountUI from "../../components/Count"

2.  引入connect用于连接UI组件和redux的store

import { connect } from "react-redux"

3.  手动生成Count容器组件

export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

4.  mapStateToProps: 读取 state，把当前 Redux store state 映射到UI组件的 props 中 

function mapStateToProps(state) {
  return {
    count: state,
  }
}

5.  mapDispatchToProps：将 操作状态的方法 映射到 UI组件 props中

//引入action
import { addAction, subAction, addAsyncAction } from "../../redux/count_action"
function mapDispatchToProps(dispatch) {
  return {
    add: (data) => {
      dispatch(addAction(data))
    },
    sub: (data) => {
      dispatch(subAction(data))
    },
    addAsync: (data, time) => {
      dispatch(addAsyncAction(data, time))
    },
  }
}

App.jsx --- 容器组件传store到props

import React, { Component } from "react"
import Count from "./containers/Count"
//必须这样传store,通过props传
import store from "./redux/store.js"
export default class App extends Component {
  render() {
    return (
      <div>
        <Count store={store} />
      </div>
    )
  }
}

CountUI组件--- 获取数据，展示页面

addNum = () => {
    const { value } = this.selectNumber
    this.props.add(value * 1)
  }
  //减法
  subNum = () => {
    const { value } = this.selectNumber
    this.props.sub(value * 1)
  }
  //奇数加
  addNumIfodd = () => {
    //如何获取count
    const { count } = this.props
    if (count % 2 !== 0) {
      this.addNum()
    }
  }
  //异步加
  addNumAsync = () => {
    const { value } = this.selectNumber
    this.props.addAsync(value * 1, 500)
  }

3.2 案例的优化

3.2.1  mapDispatchToProps的简化

mapDispatchToProps值为两种形式，函数或对象。对象形式可以简化代码

export default connect(
  (state) => ({ count: state }),
  // mapDispatchToProps简写  react-dedux帮自动分发
  {
    add: addAction,
    sub: subAction,
    addAsync: addAsyncAction,
  }
)(CountUI)

3.2.1  页面重新渲染问题

connect()()容器组件默认拥有检测rudeux状态改变的能力,所以不用手动重新渲染。

入口文件index.js中检测store状态重新渲染方法可删除。

3.2.3 容器组件的store

因为容器组件将来会有很多，所有不可能一一通过props传递store。我们可在入口文件将 store交由Provider保管，批量给整个应用中传递store对象，只需要写一次。

import store from "./redux/store"
import { Provider } from "react-redux"

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

3.2.4  整合UI组件和容器组件

把CountUI组件放到Count容器组件中，删除多余的UI组件

import React, { Component } from "react"
import "./index.css"
//引入action
import { addAction, subAction, addAsyncAction } from "../../redux/count_action"
//引入connect用于连接UI组件和redux store
import { connect } from "react-redux"

class CountUI extends Component {
  addNum = () => {
    const { value } = this.selectNumber
    this.props.add(value * 1)
  }
  //减法
  subNum = () => {
    const { value } = this.selectNumber
    this.props.sub(value * 1)
  }
  //奇数加
  addNumIfodd = () => {
    //如何获取count
    const { count } = this.props
    if (count % 2 !== 0) {
      this.addNum()
    }
  }
  //异步加
  addNumAsync = () => {
    const { value } = this.selectNumber
    this.props.addAsync(value * 1, 500)
  }
  render() {
    // console.log(this.props)
    const { count } = this.props
    return (
      <div>
        <h3>
          当前求和为：<span>{count}</span>
        </h3>
        <select
          name="select"
          id=""
          ref={(c) => (this.selectNumber = c)}
        >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>

        <button onClick={this.addNum}>+</button>
        <button onClick={this.subNum}>-</button>
        <button onClick={this.addNumIfodd}>当前求和为奇数加</button>
        <button onClick={this.addNumAsync}>异步加</button>
      </div>
    )
  }
}

// 核心 connect(映射状态)(映射操作状态的方法)(关联组件）
export default connect(
  (state) => ({ count: state }),
  // mapDispatchToProps简写  react-dedux帮自动分发
  {
    add: addAction,
    sub: subAction,
    addAsync: addAsyncAction,
  }
)(CountUI)
React——Redux介绍与使用
敲代码的小李同学的博客
07-09 908
Redux 介绍与使用，包括 Redux 如何实现维护、原生 Redux 应用、以及 React 与 Redux 结合用于组件交互。
redux的应用
随风而欲的博客
11-15 190
1,先在需要用到的地方注入 //获取码表数据 import { connect } from 'react-redux'; //获取费用类型 import { getDictAll } from '@actions/dictAction'; @connect( state => ({ user: state.userReducers }), { getDictAll,setDict }...
redux_旧版本
最新发布
Komorebi的博客
03-10 642
reduxjs/toolkit（RTK）是 Redux 官方团队推出的一个工具集，旨在简化 Redux 的使用和配置。它于 2019 年 10 月 正式发布，此文章记录一下redux的旧版本如何使用，以及引入等等。
redux的基本应用
坚持原创
04-11 177
刚开始学的时候被绕晕了，原来redux就是：store由reducer创建而成，通过store.disptch(action),然后由action来决定执行reducer里的哪些代码，从而得到新的结果 结论：第一，store分发action；第二：action决定store的结果 reducer.js var obj = [ { name: 'malinshu', age: 18 } ] ...
Redux的介绍和使用
qq_63161441的博客
01-31 690
react-redux负责把Redux和React链接起来，通过react-redux内置Provider组件通过store参数把创建好的store实例注入到应用中，链接正式建立。React组件中修改store中的数据需要借助另一个Hook函数useDispatch，它的作用是生成提交action对象的dispatch()函数。：在React组件中使用store中数据，需要用到一个钩子函数useSelector，它的作用是把store中的数据映射到组件中。作用：通过集中管理的方式管理应用的状态。
flutter_built_redux：Flutter的Built_redux提供程序
02-05
1. **Redux**：Redux是一个用于管理应用状态的库，源于JavaScript社区，它遵循单向数据流和纯函数的原则，确保状态的改变是可预测的。在Flutter中，Redux提供了一种组织和管理复杂应用状态的有效方式。 2. **...
JavaScript_Redux应用程序的另一种副作用模型.zip
05-20
在"JavaScript_Redux应用程序的另一种副作用模型.zip"中，我们看到有"redux-saga_main.zip"这个文件，这很可能是包含了一个使用Redux Saga的示例项目。Redux Saga的主要优点包括： 1. **非阻塞操作**：Saga通过生成...
flutter_github_search_rx_redux:r使用rx_redux进行Flutter github搜索|使用rxdart，rx_redux进行功能和React式编程
03-18
在本项目"flutter_github_search_rx_redux"中，开发者运用了`RxRedux`和`RxDart`库来实现Flutter应用中的GitHub搜索功能，并采用了React式的编程模式。以下是关于这些技术及其应用的详细说明： **RxDart** `RxDart`...
Learning-Vanilla_Redux-React_Redux
03-13
在IT行业中，Redux是一个非常流行的JavaScript状态管理库，尤其在构建复杂的React应用程序时。"Vanilla Redux"是指不依赖任何框架或库的纯Redux实现，而"React Redux"则是Redux与React结合使用的官方库。本教程...
BANKIT_WITH_REACT_REDUX:BANKIT_WITH_REACT_REDUX
03-21
在开发模式下运行应用程序。打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。有关更多信息，请参见关于的部分。 yarn ...
redux是什么(redux工作原理)场景
m0_71955188的博客
06-28 599
Redux 的核心思想是将应用的状态（即数据）存储在一个全局的单一状态树中，并使用纯函数来描述状态的变化。这个单一状态树被称为 Redux store，而描述状态变化的纯函数被称为 reducer。通过 reducer，我们可以描述一个个离散的 action，根据 action 的类型来变更状态，并生成新的状态。Redux 的工作流如下：应用中的组件通过调用 action creator 创建 action 对象。Action 对象中必须有一个 type 属性，用于描述要执行的操作。
Redux设计思想与使用场景
weixin_33872660的博客
06-23 486
欢迎关注我的公众号睿Talk，获取我最新的文章： 一、前言 Redux 作为 React 全家桶的一名重要成员，在众多大牛的力荐之下得到了广泛的应用，Github 上的 Star 也达到 42k 之多！然而，当触及最根本的问题，为什么要使用 Redux 的时候，很多人是说不清楚的。本文尝试解读 Redux 的设计初衷，并结合 React ...
[Redux/Mobx] 什么是redux？说说你对redux的理解？有哪些运用场景？
歌谣的博客
11-30 616
[Redux/Mobx] 什么是redux？说说你对redux的理解？有哪些运用场景？ Redux是一个数据管理的库，它除了将数据存储在单一数据源中之外，还确定了变更数据、读取数据的方式，以此来明确了数据的来源，方便调试和问题的定位； 一般Redux需要和react-redux结合应用在React应用中，除了React本身的功能之外，在React中的使用中，还需要注意防止不需要的re-render等问题。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一.
Redux
skylar的博客
08-13 464
react redux基础知识
React-Redux
麦子
12-06 852
一、Redux应用场景 1、随着 JavaScript 单页应用开发日趋复杂,管理不断变化的 state 非常困难 2、Redux的出现就是为了解决state里的数据问题 3、在React中，数据在组件中是单向流动的 4、数据从一个方向父组件流向子组件(通过props)，由于这个特征，两个非父子关系的组件（或者称作兄弟组件）之间的通信就比较麻烦 二、Redux设计思想 1、Redux是将整个应用状态存储到到一个地方，称为store 2、里面保存一棵状态树state tree 3、组件可.
【React】Redux的使用详解
m0_68324632的博客
01-17 6638
Redux就是一个帮助我们管理State的容器：Redux是JavaScript的状态容器，提供了可预测的状态管理
redux （完善版本）
Mjs1998的博客
08-10 216
redux
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

才不吃胡萝卜嘞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值