redux工作原理讲解及使用方法

目录
  • 1. redux 是什么?
  • 2.redux的原理
  • 3. 如何使用 redux?
    • (1).安装redux,创建redux文件夹,建立store.js
    • (2).建立reducers.js
    • (3).引入store.subscribe
    • (4). 引入react-redux

1. redux 是什么?

React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。react只是一个轻量级的视图层框架,如果要做大型应用就要搭配视图层框架redux一起使用。主要引用于多交互、多数据源的场景,并不是必须使用,但是必须要会。

2.redux的原理

redux的原理,首先用一张图来说明,很容易理解

首先,用户发出 Action。

store.dispatch(action);

然后,Store 自动调用 Reducer,并且传入两个参数:当前 State 和收到的 Action。 Reducer 会返回新的 State 。

let nextState = todoApp(previousState, action);

State 一旦有变化,Store 就会调用监听函数。

// 设置监听函数
store.subscribe(listener);

listener可以通过store.getState()得到当前状态。如果使用的是 React,这时可以触发重新渲染 View。

function listerner() {
  let newState = store.getState();
  component.setState(newState);
}

3. 如何使用 redux?

(1).安装redux,创建redux文件夹,建立store.js

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

安装redux:yarn add redux / npm install redux

//引入createStore,专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'
//暴露store
//applyMiddleware 是中间位 中使用thunk
export default createStore(countReducer,applyMiddleware(thunk))

(2).建立reducers.js

  • 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
  • 2.reducer函数会接到两个参数,分别为:之前的状态(preState),动作对象(action)
const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
	// console.log(preState);
	//从action对象中获取:type、data
	const {type,data} = action
	//根据type决定如何加工数据
	switch (type) {
		case 'increment': //如果是加
			return preState + data
		case 'decrement': //若果是减
			return preState - data
		default:
			return preState
	}
}

(3).引入store.subscribe

主要用subscribe监听store中每次修改情况

// 公共 index.js
import store from './redux/store'

//subscribe当store中数据发生变化就会更新数据,写在这里是让全局拥有
store.subscribe(()=>{
	ReactDOM.render(<App/>,document.getElementById('root'))
})

(4). 引入react-redux

react-redux是redux作者封装的一个库,是第三方模块,对Redux进一步简化,提供了一些额外的API(例如:Provider,connect等),使用它可以更好的组织和管理我们的代码,在React中更方便的使用Redux。

下载 react-redux

创建count 文件

//引入Count的UI组件
import CountUI from '../../components/Count'

//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

-------------------------------------------------------------
/*
	1.mapStateToProps函数返回的是一个对象;
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapStateToProps用于传递状态
*/
function mapStateToProps(state){
	return {count:state}
}
-----------------------------------------------------------------
/*
	1.mapDispatchToProps函数返回的是一个对象;
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch){
	return {
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	}
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
//改良
export default connect(
	state => ({count:state}),

	//mapDispatchToProps的一般写法
	/* dispatch => ({
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	}) */

	//mapDispatchToProps的简写
	{
		jia:createIncrementAction,
		jian:createDecrementAction,
		jiaAsync:createIncrementAsyncAction,
	}
)(Count)

生成action对象,并分别暴露

/*
	该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from '../constant'

//同步action,就是指action的值为Object类型的一般对象
export const increment = data => ({type:INCREMENT,data})
export const decrement = data => ({type:DECREMENT,data})

//异步action,就是指action的值为函数,异步action中一般都会调用同步action,异步action不是必须要用的。
export const incrementAsync = (data,time) => {
	return (dispatch)=>{
		setTimeout(()=>{
			dispatch(increment(data))
		},time)
	}
}

到此这篇关于redux工作原理讲解及使用方法的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解JavaScript状态容器Redux

    目录 一.Why Redux 二.Redux Data flow 三.Three Principles(三大原则) 四.Redux源码解析 4.1.index.js 4.2.createStore.js 4.3.combineReducers.js 4.4.bindActionCreators.js 4.5.compose.js 4.6.applyMiddleware.js 五.从零开始实现一个简单的Redux 六.Redux Devtools 七.总结 一.Why Redux 在说为什么用 R

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

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

  • 详解关于react-redux中的connect用法介绍及原理解析

    关于react-redux的一个流程图 流程图 connect用法介绍 connect方法声明: connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options]) 作用:连接React组件与 Redux store. 参数说明: mapStateToProps(state, ownProps) : stateProps 这个函数允许我们将 store 中的数据作为 props 绑定到组件上. const mapSta

  • redux工作原理讲解及使用方法

    目录 1. redux 是什么? 2.redux的原理 3. 如何使用 redux? (1).安装redux,创建redux文件夹,建立store.js (2).建立reducers.js (3).引入store.subscribe (4). 引入react-redux 1. redux 是什么? React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案.react只是一个轻量级的视图层框架,如果要做大型应用就要搭配视图层框架redux一起使用.主要引用于多交互.多数据源的场景

  • 一文理解Redux及其工作原理

    目录 一.是什么 二.工作原理 三.如何使用 小结 一.是什么 React是用于构建用户界面的,帮助我们解决渲染DOM的过程 而在整个应用中会存在很多个组件,每个组件的state是由自身进行管理,包括组件定义自身的state.组件之间的通信通过props传递.使用Context实现数据共享 如果让每个组件都存储自身相关的状态,理论上来讲不会影响应用的运行,但在开发及后续维护阶段,我们将花费大量精力去查询状态的变化过程 这种情况下,如果将所有的状态进行集中管理,当需要更新状态的时候,仅需要对这个管

  • Vue指令工作原理实现方法

    Vue简介 现在的大前端时代,是一个动荡纷争的时代,江湖中已经分成了很多门派,主要以Vue,React还有Angular为首,形成前端框架三足鼎立的局势.Vue在前端框架中的地位就像曾经的jQuery,由于其简单易懂.开发效率高,已经成为了前端工程师必不可少的技能之一. Vue是一种渐进式JavaScript框架,完美融合了第三方插件和UI组件库,它和jQuery最大的区别在于,Vue无需开发人员直接操作DOM节点,就可以改变页面渲染内容,在应用开发者具有一定的HTML.CSS.JavaScri

  • Gateway网关工作原理及使用方法

    目录 1. 什么是 API 网关(API Gateway) 分布式服务架构.微服务架构与 API 网关 API 网关的定义 API 网关的职能 API 网关的分类与功能 2. Gateway是什么 3. 为什么用Gateway 最重要的几个概念 4. Gateway怎么用 通过时间匹配 通过 Cookie 匹配 通过 Host 匹配 通过请求方式匹配 通过请求路径匹配 通过请求参数匹配 通过请求 ip 地址进行匹配 组合使用 1. 什么是 API 网关(API Gateway) 分布式服务架构.

  • 深度剖析Java中的内存原型及工作原理

    本文主要通过分析Java内存分配的栈.堆以以及常量池详细的讲解了其的工作原理. 一.java虚拟机内存原型 寄存器:我们在程序中无法控制栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中堆:存放用new产生的数据静态域:存放在对象中用static定义的静态成员常量池:存放常量非RAM存储:硬盘等永久存储空间. 二.常量池(constant pool) 常量池指的是在编译期被确定,并被保存在已编译的.class文件中的一些数据.除了包含代码中所定义的各种基本类型(如int.

  • java编程之AC自动机工作原理与实现代码

    在阅读本文之前,大家可以先参考下<多模字符串匹配算法原理及Java实现代码> 简介: 本文是博主自身对AC自动机的原理的一些理解和看法,主要以举例的方式讲解,同时又配以相应的图片.代码实现部分也予以明确的注释,希望给大家不一样的感受.AC自动机主要用于多模式字符串的匹配,本质上是KMP算法的树形扩展.这篇文章主要介绍AC自动机的工作原理,并在此基础上用Java代码实现一个简易的AC自动机. 1.应用场景-多模字符串匹配 我们现在考虑这样一个问题,在一个文本串text中,我们想找出多个目标字符串

  • PHP底层运行机制与工作原理详解

    最近搭建服务器,突然感觉lamp之间到底是怎么工作的,或者是怎么联系起来?平时只是写程序,重来没有思考过他们之间的工作原理: PHP底层工作原理 图1 php结构 从图上可以看出,php从下到上是一个4层体系 ①Zend引擎 Zend整体用纯c实现,是php的内核部分,它将php代码翻译(词法.语法解析等一系列编译过程)为可执行opcode的处理并实现相应的处理方法.实现了基本的数据结构(如hashtable.oo).内存分配及管理.提供了相应的api方法供外部调用,是一切的核心,所有的外围功能

  • 详解Android JetPack之LiveData的工作原理

    前言 本篇文章主要讲解LiveData工作的原理,如果还不知道LiveData如何用的话,请参考官方文档. LiveData的讲解涉及到了Lifecycle的知识,如果你还不了解LifeCycle,请参考文档LifeCycle介绍. 介绍 LiveData是一个数据持有类,它可以通过添加观察者被其他组件观察其变更.不同于普通的观察者,它最重要的特性就是遵从应用程序的生命周期,如在Activity中如果数据更新了但Activity已经是destroy状态,LivaeData就不会通知Activit

  • Javascript对象及Proxy工作原理详解

    正文 这一章其实算是javascript的科普文章,其实这本书的读者一般都不会是入门者,因此按道理说应该不需要再科普才对.但是作者依旧安排了这一章,证明就是这一章内容与我们以为的对象不一样. Javascript中一切皆对象 这一句话大家应该耳熟能详,对于常规的字面量对象,和new出来的对象,大家应该都能分辨 const str = '' const str2 = new String() const obj = {} const obj2 = Object.create() 但是根据ECMA,

  • React中Redux核心原理深入分析

    目录 一.Redux是什么 二.Redux的核心思想 三.Redux中间件原理 四.手写一个Redux 总结 一.Redux是什么 众所周知,Redux最早运用于React框架中,是一个全局状态管理器.Redux解决了在开发过程中数据无限层层传递而引发的一系列问题,因此我们有必要来了解一下Redux到底是如何实现的? 二.Redux的核心思想 Redux主要分为几个部分:dispatch.reducer.state. 我们着重看下dispatch,该方法是Redux流程的第一步,在用户界面中通过

随机推荐