react系列(五)在React中使用Redux

上一篇展示了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

感谢阅读。

原文地址:https://www.cnblogs.com/liuyongjia/p/9807525.html

时间: 2024-10-11 23:00:50

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

在React中使用Redux

修复遗留问题 webpack.prod.config.js中缺少了对path库的引用,执行构建npm run build:prod的时候失败.在文件开始的地方引入node.js的path库就可以了. package.json里面定义了一个build:dev的脚本,这个脚本其实有点多余,不过有时候需要打包测试版本的文件,所以还是需要存在.主要有个问题是webpack.dev.config.js中output节点下错误定义了path的值为根目录'/',这在使用npm start命令启动运行时打包的时

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

文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React. React 中的元素.组件.实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念.现在,老干部就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字.刨根问底的同学(老干部就是其中一员)的好奇心. 元素 (Element) Rea

react中使用redux管理状态流程

1.在项目中安装redux插件 npm install redux -S 2.针对单独的view组件定义store状态存储对象,参数为对状态的更新操作函数 import { createStore } from 'redux'; const reducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state > 0

React 系列教程 1:实现 Animate.css 官网效果

前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就是添加类与删除类的操作.这对于学习 React 来说是一个非常简易的例子,但是我并不会在教程中介绍相关的前置知识,比如 JSX.ES6 等,对于小白来说可能还会有一些困惑的地方,所以还要了解一下 React 相关的基础知识.虽然 React 有很多值得深究的知识,但这个系列教程并不会涉及高大深的内容

从 0 到 1 实现 React 系列 —— 组件和 state|props

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/...) 项目地址 组件即函数 在上一篇 JSX 和 Virtual DOM 中,解释了 JSX 渲染到界面的过程并实现了相应代码,代码调用如下所示: import React from 'react' import ReactDOM from 'react-dom' const element = ( <div className="titl

从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/...) 从 0 到 1 实现 React 系列 -- JSX 和 Virtual DOM 从 0 到 1 实现 React 系列 -- 组件和 state|props 从 0 到 1 实现 React 系列 -- 生命周期和 diff 算法 从 0 到 1 实现 React 系列 -- 优化 set

从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 &amp;&amp; HOC 探幽

本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) 项目地址 从 0 到 1 实现 React 系列 -- JSX 和 Virtual DOM 从 0 到 1 实现 React 系列 -- 组件和 state|props 从 0 到 1 实现 React 系列 -- 生命周期和 diff 算法 从 0 到 1 实现 React 系列 -- 优化 se

React 系列 - 写出优雅的路由

前言 自前端框架风靡以来,路由一词在前端的热度与日俱增,他是几乎所有前端框架的核心功能点.不同于后端,前端的路由往往需要表达更多的业务功能,例如与菜单耦合.与标题耦合.与"面包屑"耦合等等,因此很少有拆箱即用的完整方案,多多少少得二次加工一下. 1. UmiJS 简述 优秀的框架可以缩短 90% 以上的无效开发时间,蚂蚁的 UmiJS 是我见过最优雅的 React 应用框架,或者可以直接说是最优雅的前端解决方案(欢迎挑战),本系列将逐步展开在其之上的应用,本文重点为"路由&q

在大型应用中使用 Redux 的五个技巧

Redux 是一个很棒的用于管理应用程序"状态"的工具.单向数据流以及对不可变数据的关注使得推断状态的变化变得很简单.每次状态变化都由一个 action 触发,这会导致 reducer 函数返回一个变更后的新状态.由于客户要在我们的平台上管理或发布广告资源,在 AppNexus 使用 Redux 创建的很多用户界面都需要处理大量数据以及非常复杂的交互.在开发这些界面的过程中,我们发现了一些有用的规则和技巧以维持 Redux 易于管理.以下的几点讨论应该可以帮助到任何在大型,数据密集型应