AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

第三十四章 使用react-redux进一步管理状态

2024-01-02 125
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 第三十四章 使用react-redux进一步管理状态

react-redux和redux是两个不同的概念。

redux是一个重要的数据管理库。redux的作用是帮助处理应用程序中复杂的数据管理和状态管理，它可以让你的应用程序更加可维护和可扩展。

react-redux是一个react库，它可以帮助react开发者在react应用程序中集成redux。它通过提供一组特定于react的API来简化了redux的使用。

使用react-redux，你可以在react组件中直接操作redux中的状态和数据，而无需使用繁琐的API和命令。这样可以使代码更加简洁和易于维护。 总之，react-redux是一个非常有用的库，它可以使react开发者更加轻松地处理复杂的数据管理和状态管理。

image.png

根据模型图，改造求和案例

  • 步骤1：清除Count组件里面的redux的所有API
import React, { Component } from 'react'
export default class Count extends Component {
  increment = () => {
    // 普通加
    // 1、获取用户选择的值
    const { value } = this.selectNumber
  }
  decrement = () => {
    // 普通减
    // 1、获取用户选择的值
    const { value } = this.selectNumber
  }
  incrementIfOdd = () => {
    // 当前求和为奇数为
    // 1、获取用户选择的值
    const { value } = this.selectNumber
  }
  incrementAsync = () => {
    // 异步加
    // 1、获取用户选择的值
    const { value } = this.selectNumber
  }
  render() {
    return (
      <div>
        <h1>当前求和为：？？？？</h1>
        <select ref={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数为</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>&nbsp;
      </div>
    )
  }
}
  • 步骤2：创建Count-UI组件的容器组件

文件：src/containers/Count/index.jsx

// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'
// 创建并暴露一个容器组件
export default connect()(CountUI)

这里我们需要使用react-redux来连接我们的UI组件，所以我们需要安装依赖：

npm i react-redux

现在我们在App.jsx里面将Count的UI组件替换为容器组件

import React, { Component } from 'react'
// import Count from './components/Count'
// 引入Count的容器组件
import Count from './containers/Count'
// 引入store，用于传入容器组件
import store from './redux/store'
export default class App extends Component {
  render() {
    return (
      <div>
        <Count  store={store}/>
      </div>
    )
  }
}

这里需要将store通过props的方式引入，否则会报错：

Could not find "store" in the context of "Connect(Count)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Count) in connect options.

现在运行我们可以正常看见修改后的页面：image.png

  • 步骤3：在容器组件里面传递UI组件状态和操作状态的方法

在这里我们就直接说了，在connect方法第一次执行的时候需要传递两个方法：mapStateToProps和mapDispatchToProps.

  1. mapStateToProps方法是用于传递UI组件状态
  2. mapDispatchToProps方法是用于传递UI组件操作状态的方法

文件：src/containers/Count/index.jsx

// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'
// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'
/**
 * 1.mapStateToProps函数返回的是一个对象
 * 2.返回对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3.mapStateToProps用于传递状态
 * @param {*} state 
 * @returns 
 */
function mapStateToProps (state) {
  return {count: state}
}
/**
 * 1.mapDispatchToProps函数返回的是一个对象
 * 2.返回对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3.mapDispatchToProps用于传递操作状态的方法
 * @param {*} dispatch 
 * @returns 
 */
function mapDispatchToProps (dispatch) {
  return {
    jia: num => dispatch(createIncrementAction(num)),
    jian: num => dispatch(createDecrementAction(num)),
    jiaAsync: (num,time) => dispatch(createIncrementAsyncAction(num,time))
  }
}
// 创建并暴露一个容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
  • 步骤4：在UI组件里面使用容器组件传递过来的状态与操作状态的方法

文件：src/components/Count/index.jsx

import React, { Component } from 'react'
export default class Count extends Component {
  increment = () => {
    // 普通加
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jia(value*1)
  }
  decrement = () => {
    // 普通减
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jian(value*1)
  }
  incrementIfOdd = () => {
    // 当前求和为奇数为
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    if (this.props.count %2 !== 0) {
      this.props.jia(value*1)
    }
  }
  incrementAsync = () => {
    // 异步加
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jiaAsync(value*1,500)
  }
  render() {
    return (
      <div>
        <h1>当前求和为：{this.props.count}</h1>
        <select ref={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数为</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>&nbsp;
      </div>
    )
  }
}
  • 最后查看效果

image.png

  • 小节总结

(1). 明确两个概念：

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

 2). 容器组件：负责和redux通信，将结果交给UI组件。

(2). 如何创建一个容器组件——靠react-redux的connect函数

 connect(mapStateToProps,mapDispatchToProps)(UI组件)

 -mapStateToProps: 映射状态，返回值是一个对象

 -mapDispatchToProps: 映射操作状态的方法，返回值是一个对象

(3). 备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入。

(4). 备注2：mapDispatchToProps可以是一个函数，也可以是一个对象。

优化代码

1、优化容器组件

将容器组件的connect函数先使用箭头函数进行优化：

(1). 将普通函数改为箭头函数, src/containers/Count/index.jsx

// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'
// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'
// function mapStateToProps (state) {
//   return {count: state}
// }
const mapStateToProps = state => ({count:state})
// function mapDispatchToProps (dispatch) {
//   return {
//     jia: num => dispatch(createIncrementAction(num)),
//     jian: num => dispatch(createDecrementAction(num)),
//     jiaAsync: (num,time) => dispatch(createIncrementAsyncAction(num,time))
//   }
// }
const mapDispatchToProps = dispatch => ({
    jia: num => dispatch(createIncrementAction(num)),
    jian: num => dispatch(createDecrementAction(num)),
    jiaAsync: (num,time) => dispatch(createIncrementAsyncAction(num,time))
})
// 创建并暴露一个容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

(2). 直接将箭头函数体作为connect函数的参数

// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'
// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'
// 创建并暴露一个容器组件
export default connect(
  state => ({count: state}),
  dispatch => ({
    jia: num => dispatch(createIncrementAction(num)),
    jian: num => dispatch(createDecrementAction(num)),
    jiaAsync: (num,time) => dispatch(createIncrementAsyncAction(num,time))
  })
  )(CountUI)

(3). 将mapDispacthToProps直接写为一个对象

// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'
// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'
// 创建并暴露一个容器组件
export default connect(
  state => ({count: state}),
  {
    jia:createIncrementAction,
    jian:createDecrementAction,
    jiaAsync:createIncrementAsyncAction
  }
  )(CountUI)

这里可以有一点困惑，其实该对象被传递给UI组件使用时，简要的流程是这样的：

UI组件 ===> this.props.jia(value*1) // 但是jia对应的值其实是createIncrementAction这个函数
实际调用 ===> createIncrementAction(value*1) // 这时返回给store的值是一个action对象，而不是函数
最后store监测到值是一个action对象，直接调用reducer修改更新状态的值。
2、关闭redux的监听

原来我们修改redux的状态，需要使用一个API：store.subscribe来监听状态的改变，再次渲染页面，现在使用了react-redux，它已经帮我们做了状态变化的监听，不需要我们自己写了：

关闭在入口文件的监听事件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// import store from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
// store.subscribe(() => {
//   root.render(
//     <React.StrictMode>
//       <App />
//     </React.StrictMode>
//   );
// })
3、使用Provider组件优化store对容器组件的传递

原来我们传递给容器组件的方式是在App组件里面通过props的方式将store传递给容器组件的，但是这样有一个问题：

import React, { Component } from 'react'
// 引入Count的容器组件
import Count from './containers/Count'
// 引入store，用于传入容器组件
import store from './redux/store'
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 给容器组件传递store */}
        <Count  store={store} />
        <Count1  store={store} />
        <Count2  store={store} />
        <Count3  store={store} />
        <Count4  store={store} />
      </div>
    )
  }
}

假设如上代码，我们有很多个容器组件，难道我们需要一个一个的这样手写props吗？这样很不合理，所以react-redux提供了一个Provider组件帮我们实现了对整个应用的容器组件传递store，无需我们一个一个的props手写传递。

(1). 将原来在APP组件传递store的方式去掉

import React, { Component } from 'react'
// 引入Count的容器组件
import Count from './containers/Count'
export default class App extends Component {
  render() {
    return (
      <div>
        <Count/>
      </div>
    )
  }
}

(2). 在入口文件引入并使用Provider组件

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import store from './redux/store'
import { Provider } from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

至此，无论有多少个容器组件，都无需我们手写props进行传递store了，非常人性化。

4、将容器组件与UI组件整合为一个文件

为了避免文件过多，将容器组件和UI组件合并为一个组件可以使代码更加简洁和易于维护。这样可以将UI组件的状态和属性与容器组件的状态和属性分离，使得组件之间的通信更加明确和紧密。此外，将容器组件和UI组件合并为一个组件也可以减少组件的数量，使得代码结构更加清晰和易于理解。

合并非常简单，就是将UI组件的代码搬到容器组件里面来即可。

// 引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'
// 引入react-redux中的connect用于连接UI组件和容器组件
import { connect } from 'react-redux'
import React, { Component } from 'react'
class Count extends Component {
  increment = () => {
    // 普通加
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jia(value*1)
  }
  decrement = () => {
    // 普通减
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jian(value*1)
  }
  incrementIfOdd = () => {
    // 当前求和为奇数为
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    if (this.props.count %2 !== 0) {
      this.props.jia(value*1)
    }
  }
  incrementAsync = () => {
    // 异步加
    // 1、获取用户选择的值
    const { value } = this.selectNumber
    this.props.jiaAsync(value*1,500)
  }
  render() {
    return (
      <div>
        <h1>当前求和为：{this.props.count}</h1>
        <select ref={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数为</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>&nbsp;
      </div>
    )
  }
}
// 创建并暴露一个容器组件
export default connect(
  state => ({count: state}),
  /*dispatch => ({
    jia: num => dispatch(createIncrementAction(num)),
    jian: num => dispatch(createDecrementAction(num)),
    jiaAsync: (num,time) => dispatch(createIncrementAsyncAction(num,time))
  })*/
  {
    jia:createIncrementAction,
    jian:createDecrementAction,
    jiaAsync:createIncrementAsyncAction
  }
  )(Count)

使用的时候，引入容器组件即可。

小节总结
  • 优化connect函数的代码逻辑
  • 引入Provider组件优化容器组件的store传递
  • 引入react-redux后无需自己监测redux的变化
  • mapDispatchToProps也可以简化写成对象形式
  • 一个组件要和redux“打交道”要经过几个步骤：
(1).定义好UI组件——不暴露
(2).引入connect函数生成一个容器组件，并暴露，写法如下：
  connect(
    state => ({key:value}), // 映射状态
    {key:value} // 映射操作状态的方法
  )(UI组件)
(3).在UI组件中通过this.props.xxxx读取和操作状态


文章标签：
容器
JavaScript
前端开发
API
数据管理
天界程序员
目录
相关文章
阿里云百炼小助手
|
14天前
|
人工智能 自然语言处理 Shell
🦞 如何在 OpenClaw (Clawdbot/Moltbot) 配置阿里云百炼 API
本教程指导用户在开源AI助手Clawdbot中集成阿里云百炼API，涵盖安装Clawdbot、获取百炼API Key、配置环境变量与模型参数、验证调用等完整流程，支持Qwen3-max thinking (Qwen3-Max-2026-01-23)/Qwen - Plus等主流模型，助力本地化智能自动化。
阿里云百炼小助手
28546 100
🦞 如何在 OpenClaw (Clawdbot/Moltbot) 配置阿里云百炼 API
ClawdbotMoltbot
|
4天前
|
应用服务中间件 API 网络安全
3分钟汉化OpenClaw，使用Docker快速部署启动OpenClaw（Clawdbot）教程
2026年全新推出的OpenClaw汉化版，是基于Claude API开发的智能对话系统本土化优化版本，解决了原版英文界面的使用壁垒，实现了界面、文档、指令的全中文适配。该版本采用Docker容器化部署方案，开箱即用，支持Linux、macOS、Windows全平台运行，适配个人、企业、生产等多种使用场景，同时具备灵活的配置选项和强大的扩展能力。本文将从项目简介、部署前准备、快速部署、详细配置、问题排查、监控维护等方面，提供完整的部署与使用指南，文中包含实操代码命令，确保不同技术水平的用户都能快速落地使用。
ClawdbotMoltbot
3158 0
Artisaner
|
10天前
|
人工智能 安全 机器人
OpenClaw（原 Clawdbot）钉钉对接保姆级教程 手把手教你打造自己的 AI 助手
OpenClaw（原Clawdbot）是一款开源本地AI助手，支持钉钉、飞书等多平台接入。本教程手把手指导Linux下部署与钉钉机器人对接，涵盖环境配置、模型选择（如Qwen）、权限设置及调试，助你快速打造私有、安全、高权限的专属AI助理。（239字）
Artisaner
5523 15
OpenClaw（原 Clawdbot）钉钉对接保姆级教程 手把手教你打造自己的 AI 助手
Moltbot
|
8天前
|
人工智能 机器人 Linux
OpenClaw（Clawdbot、Moltbot）汉化版部署教程指南（零门槛）
OpenClaw作为2026年GitHub上增长最快的开源项目之一，一周内Stars从7800飙升至12万+，其核心优势在于打破传统聊天机器人的局限，能真正执行读写文件、运行脚本、浏览器自动化等实操任务。但原版全英文界面对中文用户存在上手门槛，汉化版通过覆盖命令行（CLI）与网页控制台（Dashboard）核心模块，解决了语言障碍，同时保持与官方版本的实时同步，确保新功能最快1小时内可用。本文将详细拆解汉化版OpenClaw的搭建流程，涵盖本地安装、Docker部署、服务器远程访问等场景，同时提供环境适配、问题排查与国内应用集成方案，助力中文用户高效搭建专属AI助手。
Moltbot
4007 8
Artisaner
|
11天前
|
人工智能 机器人 Linux
保姆级 OpenClaw （原 Clawdbot）飞书对接教程 手把手教你搭建 AI 助手
OpenClaw（原Clawdbot）是一款开源本地AI智能体，支持飞书等多平台对接。本教程手把手教你Linux下部署，实现数据私有、系统控制、网页浏览与代码编写，全程保姆级操作，240字内搞定专属AI助手搭建！
Artisaner
5138 17
保姆级 OpenClaw （原 Clawdbot）飞书对接教程 手把手教你搭建 AI 助手
ClawdbotMoltbot
|
11天前
|
存储 人工智能 机器人
OpenClaw是什么？阿里云OpenClaw（原Clawdbot/Moltbot）一键部署官方教程参考
OpenClaw是什么？OpenClaw（原Clawdbot/Moltbot）是一款实用的个人AI助理，能够24小时响应指令并执行任务，如处理文件、查询信息、自动化协同等。阿里云推出的OpenClaw一键部署方案，简化了复杂配置流程，用户无需专业技术储备，即可快速在轻量应用服务器上启用该服务，打造专属AI助理。本文将详细拆解部署全流程、进阶功能配置及常见问题解决方案，确保不改变原意且无营销表述。
ClawdbotMoltbot
5593 5
小鲸云
|
13天前
|
人工智能 JavaScript 应用服务中间件
零门槛部署本地AI助手：Windows系统Moltbot（Clawdbot）保姆级教程
Moltbot（原Clawdbot）是一款功能全面的智能体AI助手，不仅能通过聊天互动响应需求，还具备“动手”和“跑腿”能力——“手”可读写本地文件、执行代码、操控命令行，“脚”能联网搜索、访问网页并分析内容，“大脑”则可接入Qwen、OpenAI等云端API，或利用本地GPU运行模型。本教程专为Windows系统用户打造，从环境搭建到问题排查，详细拆解全流程，即使无技术基础也能顺利部署本地AI助理。
小鲸云
7469 16
ChenAI_TGF
|
13天前
|
人工智能 JavaScript API
零门槛部署本地 AI 助手：Clawdbot/Meltbot 部署深度保姆级教程
Clawdbot（Moltbot）是一款智能体AI助手，具备“手”（读写文件、执行代码）、“脚”（联网搜索、分析网页）和“脑”（接入Qwen/OpenAI等API或本地GPU模型）。本指南详解Windows下从Node.js环境搭建、一键安装到Token配置的全流程，助你快速部署本地AI助理。（239字）
ChenAI_TGF
5095 22

热门文章

最新文章

  • 1
    Ubuntu22.04上Docker的安装
  • 2
    ccxt中文教程
  • 3
    CC：基于组件总线的Android组件化开源框架
  • 4
    Linux系统小技巧（1）：/dev/random设备可能导致java程序启动慢或者操作耗时不正常
  • 5
    SQL SERVER数据库删除LOG文件和清空日志的方案
  • 6
    RESTful API 文档生成神器 Wisdom REST Client
  • 7
    面对复杂业务，if-else coder 如何升级？
  • 8
    RestHighLevelClient查询es
  • 9
    Maven3 package时报 &#39;version&#39; contains an expression but should be a constant
  • 10
    用awk数组处理两个文件的例子
  • 1
    OpenClaw（Clawdbot）部署教程+6个超实用OpenClaw Skills实操分享：从聊天工具到学习神器
    188
  • 2
    2026年OpenClaw（Clawdbot）部署WordPress网站教程：零基础也能快速搞定
    66
  • 3
    2026年OpenClaw（Clawdbot）部署成功教程及OpenClaw+Skills可以做什么参考
    201
  • 4
    2026年新手快速部署OpenClaw（Clawdbot）+接入Telegram步骤流程
    97
  • 5
    阿里云无影AgentBay部署OpenClaw（Clawdbot）步骤教程，新手小白直接抄作业
    56
  • 6
    《零信任架构运维监控信任体系构建实操手册》
    42
  • 7
    《分布式跨域业务事务可用性与性能度量手册》
    39
  • 8
    2026年OpenClaw(Clawdbot)部署 + 接入Discord教程，小白直接抄作业（必看）
    116
  • 9
    2026年新手零门槛部署OpenClaw(Clawdbot) + 接入WhatsApp保姆级教程
    86
  • 10
    2026年新手小白一键部署OpenClaw(Clawdbot) + Slack接入喂饭级教程
    47

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    第五届伏魔挑战赛如约来袭，诚邀各路高手来战！