详解React 和 Redux的关系

目录
  • 一、redux和react的关系
  • 二、react多组件共享
  • 三、redux的三个核心概念
    • 1、store
    • 2、action （动作）
    • 3、reducer （纯函数）
  • 总结

文档： Redux中文文档

Redux 官方文档对 Redux 的定义是：一个可预测的 JavaScript 应用状态管理容器。

一、redux和react的关系

Redux并不只为react应用提供状态管理， 它还支持其它的框架。

React 是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案。因此react在涉及到数据的处理以及组件之间的通信时会比较复杂。

对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React，写大型应用比较吃力。

redux的优势：

集中式存储和管理应用的状态

处理组件通讯问题时，无视组件之间的层级关系

简化大型复杂应用中组件之间的通讯问题

数据流清晰，易于定位 Bug

二、react多组件共享

抽离所有组件的状态，类比 React 组件树，构造一个中心化的状态树，这棵状态树与 React 组件树一一对应，相当于对 React 组件树进行了状态化建模：

├── src
   ├── store          # redux目录，一般约定叫store
   │   ├── index.js   # 定义并导出store. 其中会导入reducer
   │   └── reducer    # reducer函数
   ├── App.js         # 根组件，引入Father 和 Uncle组件

1.redux可以无视组件层级

2.对于组件系统来说，redux就是一个第三方的，全局的“变量”

三、redux的三个核心概念

核心概念：store、action、reducer  

1、store

store是一个仓库，Redux 的核心，整合 action 和 reducer，与vuex的store意义上相似

特点：

  • 一个应用只有一个 store
  • 维护应用的状态，获取状态：store.getState()
  • 创建 store 时接收 reducer 作为参数：const store = createStore(reducer)
  • 发起状态更新时，需要分发 action：store.dispatch(action)
import { createStore } from 'redux'
// 创建 store
const store = createStore(reducer)

2、action （动作）

action是一个js对象，他有两个属性：

type：标识属性，值是字符串。多个type用action分开

payload：数据属性，可选。表示本次动作携带的数据

特点：

  • 只描述做什么
  • JS 对象，必须带有 type 属性，用于区分动作的类型
  • 根据功能的不同，可以携带额外的数据，配合该数据来完成相应功能
const action1 = { type:'addN', payload: 12 }
// store.dispatch(action1)

const action2 = { type:'add', payload: 1 }

3、reducer （纯函数）

作用：

1.初始化状态

2.修改状态

修改状态 ：根据传入的旧状态 和action，返回一个新状态

initState = 0
function reducer(state = initState, action) {
  return state
}

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 一文搞懂redux在react中的初步用法

    Redux是一个数据状态管理插件,当使用React或是vue开发组件化的SPA程序时,组件之间共享信息是一个非常大的问题.例如,用户登陆之后客户端会存储用户信息(ID,头像等),而系统的很多组件都会用到这些信息,当使用这些信息的时候,每次都重新获取一遍,这样会非常的麻烦,因此每个系统都需要一个管理多组件使用的公共信息的功能,这就是redux的作用. 如果你是从来没有接触过redux的开发者,希望您能够有耐心的看一看,我也是看好很多博客慢慢自己总结的!!!!比大佬们一个一个分布找要强一点. imp

  • 详解react-redux插件入门

    可先查看我的redux简单入门 react-redux简介 react-redux是使用redux开发react时使用的一个插件,另外插一句,redux不是react的产品,vue和angular中也可以使用redux:下面简单讲解,如何使用react-redux来开发react. 描述 这个插件可以让我们的redux代码更加的简洁和美观.我假设你已经有一个使用create-react-app创建的一个可以显示hello world的react环境,并且已经安装来redux. 注意:如果是刚使用

  • 浅谈React和Redux的连接react-redux

    之前一直在探索React相关的东西,手上有个SPA项目,于是准备上Redux试试水.Redux本身和React并没有之间的关联,它是一个通用Javscript App模块,用做App State的管理.要在React的项目中使用Redux,比较好的方式是借助react-redux这个库来做连接,这里的意思是,并不是没有react-redux,这两个库就不弄一起用了,而是说react-redux提供了一些封装,一种更科学的代码组织方式,让我们更舒服地在React的代码中使用Redux. 之前仅通过

  • react redux入门示例

    环境准备 为了方便,这里使用create-react-app搭建react环境 create-react-app mydemo 弹出配置 如果需要自定义react的配置,需要运行下面的命令把配置文件弹出来. npm run eject 安装redux npm i redux --save 简单理解 redux简单用法就是通过它的store来订阅和发布信息. 通过subscribe来订阅action,通过dispatch来触发action.reducer中定义来各个action要做的事情. dem

  • React与Redux之数组处理讲解

    本文将介绍一些常用的数组处理函数和语法,如reduce().filter().map().every().some().展开运算符.这些知识和React与Redux本身没有直接关系,但是本章的示例中包含了这些函数和语法的用法,我们正好可以在程序中学习它们.另外值得一提的是,reduce().filter().map()等函数的思想来自函数式编程,感谢JavaScript是一门函数式编程语言,让原本复杂的逻辑处理变得如此简单. reduce() 概述 reduce()方法接收一个函数作为累加器(a

  • 详解React 和 Redux的关系

    详解React 和 Redux的关系

    目录 一.redux和react的关系 二.react多组件共享 三.redux的三个核心概念 1.store 2.action (动作) 3.reducer (纯函数) 总结 文档: Redux中文文档 Redux 官方文档对 Redux 的定义是:一个可预测的 JavaScript 应用状态管理容器. 一.redux和react的关系 Redux并不只为react应用提供状态管理, 它还支持其它的框架. React 是 DOM 的一个抽象层(UI 库),并不是 Web 应用的完整解决方案.因

  • 详解react、redux、react-redux之间的关系

    本文介绍了react.redux.react-redux之间的关系,分享给大家,也给自己留个笔记,具体如下: React 一些小型项目,只使用 React 完全够用了,数据管理使用props.state即可,那什么时候需要引入Redux呢? 当渲染一个组件的数据是通过props从父组件中获取时,通常情况下是 A --> B,但随着业务复杂度的增加,有可能是这样的:A --> B --> C --> D --> E,E需要的数据需要从A那里通过props传递过来,以及对应的 E

  • 一文详解React Redux使用方法

    一文详解React Redux使用方法

    目录 一.理解JavaScript纯函数 1.1 纯函数的概念 1.2 副作用概念的理解 1.3 纯函数在函数式编程的重要性 二.Redux的核心思想 2.1 为什么需要 Redux 2.2 Redux的核心概念 2.2.1 store 2.2.2 action 2.2.3 reducer 2.3 Redux的三大原则 2.3.1 单一数据源 2.3.2 State是只读的 2.3.3 使用纯函数来执行修改 2.4 Redux 工作流程 三.Redux基本使用 3.1 创建Store的过程 3.

  • 详解React 父组件和子组件的数据传输

    在学习 React 框架组件间数据传输知识点前,我们需要先明确几点使用原则. React的组件间通讯是单向的.数据必须是由父级传到子级或者子级传递给父级层层传递. 如果要给兄弟级的组件传递数据,那么就要先传递给公共的父级而后在传递给你要传递到的组件位置. 这种非父子关系的组件间传递数据,不推荐使用这种层层传递的方式:而是选择使用维护全局状态功能模块(Redux) 一.父组件向子组件传递数据 父组件向子组件传递数据是通过在父组件中引用子组件时,在子组件标签设置传输数据的属性:而子组件中通过 thi

  • 详解React Angular Vue三大前端技术

    详解React Angular Vue三大前端技术

    一.[React] React(也被称为React.js或ReactJS)是一个用于构建用户界面的JavaScript库.它由Facebook和一个由个人开发者和公司组成的社区来维护. React可以作为开发单页或移动应用的基础.然而,React只关注向DOM渲染数据,因此创建React应用通常需要使用额外的库来进行状态管理和路由,Redux和React Router分别是这类库的例子. 基本用法 下面是一个简单的React在HTML中使用JSX和JavaScript的例子. Greeter函数

  • 详解React项目的服务端渲染改造(koa2+webpack3.11)

    详解React项目的服务端渲染改造(koa2+webpack3.11)

    因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料.成功踩坑. 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用NEXT框架来写 项目地址:https://github.com/wlx200510/react_koa_ssr 脚手架选型:webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要

  • 详解react应用中的DOM DIFF算法

    详解react应用中的DOM DIFF算法

    前言 对我们搞前端的来说,目前最流行的两大前端框架毫无疑问当属React和Vue,对于这两大框架,想必大家也是再熟悉不过了.然而,这两大框架无一例外的全部放弃使用传统的DOM技术,却采用了以JS为基础的Virtual DOM技术,也可称作虚拟DOM.所以,到底什么是Virtual DOM?两大热门框架全部使用Virtual DOM的原因又是什么?接下来让我这个搞前端的人来好好地为您讲解一下DOM DIFF算法的牛逼之处. 什么是Virtual DOM? 如字面意思所说,Virtual DOM即

  • 详解React 16 中的异常处理

    详解React 16 中的异常处理 异常处理 在 React 15.x 及之前的版本中,组件内的异常有可能会影响到 React 的内部状态,进而导致下一轮渲染时出现未知错误.这些组件内的异常往往也是由应用代码本身抛出,在之前版本的 React 更多的是交托给了开发者处理,而没有提供较好地组件内优雅处理这些异常的方式.在 React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃:未被任何异常边界捕获的异常可能会导致

  • 详解React Native监听Android回退按键与程序化退出应用

    详解React Native监听Android回退按键与程序化退出应用 前言 我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!

  • 详解react组件通讯方式(多种)

    1.父组件向子组件传值 父组件向子组件传值一般采用props属性传递 父组件: import React from 'react' import Child from './Child' const dataList = [ { id: '001', value: '张三' }, { id: '002', value: '李四' } ] const Parent = props => { return ( <ul> <Child dataList={dataList}><

随机推荐