上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular、Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它。

这篇主要讲解在React中使用Redux,首先是安装。

安装React Redux

yarn add redux
yarn add react-redux

有两个概念:

1.容器组件(Container Components)

2.展示组件(Presentational Components)

展示组件

  • 更关注数据展示,所以会写一些DOM嵌套和CSS
  • 通常不依赖Redux,直接从props中获取数据
  • 通常没有state,偶尔会用state来保存一些展示状态,如class等
  • 交互也通过props回调发起,不直接发起action

容器组件

  • 通常作为数据源,做数据分发工作
  • 依赖Redux
  • 通过和store交互进行数据变更
  • 通过react-redux生成

在我们的项目中,一般来说,会编写很多展示组件,少量的容器组件来包裹这些展示组件。

接下来写一个简单的计数器应用,先来划分容器组件和展示组件。

计数器有三个按钮,加、减、重置;一个展示区。

由于按钮既要触发action,又要负责展示,所以需要做成混合组件。

先来编写展示组件,就是显示一下当前计数。

import React from 'react';
const Counter = ({
count
}) => (
<p>当前计数为:<span style={{color: 'red'}}>count</span></p>
) export default Counter;

一般来说,容器组件就是通过store.subscribe传入回调,订阅store的变化,再去把值通过props传入各个组件中。

在react-redux中实现了connect方法,它生成一个高阶组件,就是前面提到的容器组件。这个方法做了性能优化避免不必要的重复渲染,建议使用该方法。

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

mapStateToProps是一个Function,用来监听Redux Store的变化,将store的值,映射为对应的props属性。

const mapStateToProps = ({count}) => {count};
// 或者
const mapStateToProps2 = (state) => {
count: state.count
}

接下来生成一个容器组件。

import { connect } from 'react-redux';

const ConnectCounter = connect(
mapStateToProps
)(Counter); export default ConnectCounter;

接下来是按钮组件,按钮组件既需要展示,又有数据交互,做成混合组件。

由于,需要dispatch,所以需要给connect传入第二个参数。

mapDispatchToProps可以是Object或者Function。用来将dispatch映射到props上。

const mapDispatchToProps = dispatch => {
return {
plus: () => dispatch({
type: 'PLUS'
})
}
}
// 或者结合上篇提到的bindActionCreators合成一个对象
function plus() {
return {
type: "PLUS"
};
} function minus() {
return {
type: "MINUS"
};
} const mapDispatchToProps2 = dispatch => {
return bindActionCreators({ plus, minus }, dispatch)
}
import React from 'react';

let Button = ({plus, minus}) => {
return (
<>
<button onClick={plus}>{'plus'}</button>
<button onClick={minus}>{'minus'}</button>
</>
)
}; Button = connect(()=>{}, mapDispatchToProps2)(Button);
export default Button;

最后,提供一个Provider用来提供全局store。完整例子在这里-codesandbox

感谢阅读。

react系列(五)在React中使用Redux的更多相关文章

  1. react系列一,react虚拟dom如何转成真实的dom

    react,想必作为前端开发一定不陌生,组件化以及虚拟dom使得react成为最受欢迎额前端框架之一.我们知道react是基于虚拟dom的,但是什么是虚拟dom呢,其实就是一组js对象,那么我们今天就 ...

  2. mysql系列五、mysql中having的用法

    HAVING 子句对 GROUP BY 子句设置条件的方式与 WHERE 和 SELECT 的交互方式类似.WHERE 搜索条件在进行分组操作之前应用:而HAVING 搜索条件在进行分组操作之后应用. ...

  3. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  4. 在react中使用redux并实现计数器案例

    React + Redux 在recat中不使用redux 时遇到的问题 在react中组件通信的数据是单向的,顶层组件可以通过props属性向下层组件传递数据,而下层组件不能向上层组件传递数据,要实 ...

  5. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  6. React Native 系列(五) -- 组件间传值

    前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...

  7. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  8. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  9. React Native 系列(五)

    前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...

随机推荐

  1. 用KMP算法与Trie字典树实现屏蔽敏感词(UTF-8编码)

    前几天写好了字典,又刚好重温了KMP算法,恰逢遇到朋友吐槽最近被和谐的词越来越多了,于是突发奇想,想要自己实现一下敏感词屏蔽. 基本敏感词的屏蔽说起来很简单,只要把字符串中的敏感词替换成“***”就可 ...

  2. 使用JS完成首页轮播图效果

    获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...

  3. Android sqlite日期存储

    SQLite日期类型是以TEXT.REAL和INTEGER类型分别不同的格式表示的,对应如下:TEXT: "YYYY-MM-DD HH:MM:SS.SSS"REAL: 以Julia ...

  4. Python爬虫教程-12-爬虫使用cookie爬取登录后的页面(人人网)(上)

    Python爬虫教程-12-爬虫使用cookie(上) 爬虫关于cookie和session,由于http协议无记忆性,比如说登录淘宝网站的浏览记录,下次打开是不能直接记忆下来的,后来就有了cooki ...

  5. k 近邻算法(k-Nearest Neighbor,简称kNN)

    预约助教问题: 1.计算1-NN,k-nn和linear regression这三个算法训练和查询的时间复杂度和空间复杂度? 一. WHy 最简单最初级的分类器是将全部的训练数据所对应的类别都记录下来 ...

  6. Ubuntu上如何搭建Android开发环境

    1.以下是开始Android应用程序编程之前需要的软件列表: a.Java JDK5 及以后版本 b.Java运行环境 c.Android Studio 2.安装Android Studio: x64 ...

  7. QT 编译遇到重定义;不同的基类型&在QT中使用C++ lib库

    最近在使用osg和qt开发,在集成osg时候因为我使用的qt版本为非opengl的版本,导致qt自己封了一遍opengl的一些基类变量如double 这时候就会跟osg中声明的opengl的类型冲突, ...

  8. C++ 类的存储方式以及虚函数表

    一.C++成员函数在内存中的存储方式 用类去定义对象时,系统会为每一个对象分配存储空间.如果一个类包括了数据和函数,要分别为数据和函数的代码分配存储空间.按理说,如果用同一个类定义了10个对象,那么就 ...

  9. Struts2学习-json

    Struts2 实现JSON输出有2种办法1.把Action变成Servlet,使用传统做法2.使用Struts 内置功能完成 二. 1.导入配置,pom.xml,要去struts2的官网下载mvnr ...

  10. 一句DOS命令搞定文件合并

    用Dos的copy命令实现: copy a.js+b.js+c.js abc.js /b 将 a.js b.js c.js 合并为一个 abc.js,最后的 /b 表示文件为二进位文件,copy 命令 ...