redux使用流程,redux入门教程

redux使用流程,redux入门教程,redux工作原理讲解及使用方法

本文主要介绍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的原理,先用一张图说明,很好理解。

首先,用户发出一个动作。

store.dispatch(动作);

然后,存储自动调用Reducer并传入两个参数:当前状态和接收到的动作。减速器返回新状态。

设next state=todo app(previous state,action);

一旦状态改变,商店将调用监听功能。

//设置监听功能

store.subscribe(监听器);

侦听器可以通过store.getState()获取当前状态。如果使用React,可以触发视图的重新渲染。

函数列表器(){

let new state=store . getstate();

component . set state(new state);

}

3. 如何使用 redux?

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

这个文件专门用来公开一个store对象,整个应用程序中只有一个store对象。

安装Redux:纱线添加Redux/NPM安装Redux

//引入createStore,专门用来创建redux中最核心的Store对象。

从“redux”导入{createStore,applyMiddleware}

//引入一个为计数组件服务的缩减器

从'导入国家证书。/count_reducer '

//引入redux-thunk支持异步动作

从“redux-thunk”导入thunk

//公开存储区

//applyMiddleware是thunk用在中间位。

导出默认createStore(countReducer,applyMiddleware(thunk))

(2).建立reducers.js

1.这个文件用于创建一个为Count组件服务的reducer。减速器的本质是一个函数。

2.2.reducer函数将接收两个参数:前一个preState和action对象。

Const initState=0 //初始化状态

导出默认函数count reducer(preState=initState,action){

//console . log(preState);

//Get: type,动作对象的数据

const {type,data}=action

//根据类型决定如何处理数据

开关(类型){

如果是加号,则为“increment”://case

返回预状态数据

大小写“减少”://如果是减少

返回预状态数据

默认值:

返回预定状态

}

}

(3).引入store.subscribe

主要使用subscribe来监控商店中的每个修改。

//公共索引. js

从'导入存储。/redux/store '

//订阅当存储中的数据发生变化时,它会更新数据,这里写的是全局所有权。

store.subscribe(()={

ReactDOM.render(App/,document.getElementById('root '))

})

(4). 引入react-redux

React-redux是redux作者打包的库,是第三方模块。它进一步简化了Redux,并提供了一些额外的API(例如,Provider、connect等。).使用它可以更好地组织和管理我们的代码,并且更容易在React中使用Redux。

下载react-redux

创建计数文件

//引入Count的UI组件

从'导入CountUI././组件/计数'

//connect的引入是为了用redux连接UI组件

从“react-redux”导入{connect}

-

/*

1.1.mapStateToProps函数返回一个对象;

2.返回的对象中的键是传递给UI组件props的键,值是传递给UI组件props的值。

3.mapStateToProps用于传输状态

*/

函数mapStateToProps(state){

返回{count:state}

}

-

/*

1.1.mapDispatchToProps函数返回一个对象;

2.返回的对象中的键是传递给UI组件props的键,值是传递给UI组件props的值。

3.3.mapDispatchToProps用于传输操作状态的方法

*/

函数mapDispatchToProps(调度){

返回{

贾:number=dispatch(createIncrementAction(number)),

Jian:number=dispatch(createDecrementAction(number)),

jiaAsync:(number,time)=dispatch(createincrementasynccaction(number,time)),

}

}

//使用connect()()创建并暴露一个数数的容器组件

导出默认连接(mapStateToProps,mapDispatchToProps)(CountUI)

//改良

导出默认连接(

状态=({count:state}),

//mapDispatchToProps的一般写法

/* dispatch=({

贾:number=dispatch(createIncrementAction(number)),

Jian:number=dispatch(createDecrementAction(number)),

jiaAsync:(number,time)=dispatch(createincrementasynccaction(number,time)),

}) */

//mapDispatchToProps的简写

{

贾:创造增量行动,

jian:createDecrementAction,

贾异步:createincrementasynccaction,

}

)(计数)

生成行为对象,并分别暴露

/*

该文件专门为数数组件生成行为对象

*/

从'导入{增量,减量}./常数

//同步行动,就是指行为的值为目标类型的一般对象

export const INCREMENT=data=({ type:INCREMENT,data})

export const DECREMENT=data=({ type:DECREMENT,data})

//异步行动,就是指行为的值为函数,异步行为中一般都会调用同步行动,异步行为不是必须要用的。

导出常量增量同步=(数据,时间)={

退货(发货)={

setTimeout(()={

分派(增量(数据))

},时间)

}

}

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

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: