一篇文章介绍redux react-redux redux-saga总结

本文主要提取了react系列桶装产品的核心成分，香精水平与精油相当。亲爱的大人，既然您来了，请坐，过来给客人看看茶吧~ ~

前言

首先，本文要求你对js、react等知识有一定的了解。如果没有，我建议你先读读React的精髓！完整的总结(快速)

React有道具和状态：

Props是指父级分配的属性状态是指组件内部的自管理状态，整个react没有向上追溯数据的能力，是React的单向数据流，也就是说如果是一个数据状态非常复杂的应用，经常会发现React无法让两个组件相互通信，使用彼此的数据。React通过层次结构传输数据的方法非常不舒服。此时，迫切需要一种机制，将所有状态集中在组件的顶部，并将所有状态灵活地分配给所有组件。是的，这是redux。

简介

Redux的诞生是为了给React应用程序提供一个可预测的状态管理机制。Redux将整个应用程序状态(实际上是数据)存储在一个地方，这个地方叫做store。改变存储中状态树组件状态的唯一方法是调用存储的调度方法来触发一个动作，该动作由相应的缩减器处理。因此，状态更新组件可以向存储分派动作，而不是直接通知其他组件，其他组件可以通过订阅存储中的状态来使用步骤刷新其视图。

创建减速器

可以使用单个reducer，也可以将多个reducer组合成一个reducer，即combineReducers()操作发送一个命令，然后将状态放入reucer处理函数，返回一个新的状态，并处理该状态以创建一个操作

用户无法接触状态，只能通过查看触发。因此，这个动作可以理解为指令，需要多少指令就有多少。action是一个对象，必须有一个名为type的参数，它定义了由action type创建的存储，并使用createStore方法

Store可以理解为为拥有多台处理机的通用工厂提供subscribe、dispatch和getState方法。一步一步，手牵手。

以上步骤，对应的序列号，我会在相关代码中标注

NPM install redux-S//install import { create store }从' redux'/引入const reducer=(state={ count : 0 }，action)={-switch(action . type){ case ' INDEX ' :返回{ count : state . count 1 }；case ' DEVELOP ' :返回{ count : state . count-1 }；default:返回状态；} } const actions={-incremente :()=({ type : ' increment ' })，decorase :()=({ type : ' reduce ' })} const store=CreateStore(reductor)；-store . subscribe(()=console . log(store . getstate())；Store.dispatch (actions .递增())//{ count : 1 } store . dispatch(actions .递增())//{ count : 2 } store . dispatch(actions .递增())/{count: 3}自己还原

redux

开头说，如果商店直接集成到React应用的顶级道具中，只要每个子组件都可以访问顶级道具，例如：

顶级组件商店={store} App //不就可以了吗？这就是反应还原。Redux官方提供的React绑定库。具有高效、灵活的特点。

React Redux将组件区分为容器组件和UI组件

前者处理逻辑，后者只负责显示和交互，内部不处理逻辑，状态完全由外部两个内核控制

供应者

看看我上面代码的顶层组件。是的，你没猜错。这个顶级组件是Provider。通常，我们将顶级组件包装在Provider组件中，这样所有组件都可以在react-redux的控制下，但是store必须作为参数放入Provider组件中

provider store={ store } app/provider此组件的目的是使所有组件都能访问Redux中的数据。

连接

这是react-redux的难点。让我们详细解释一下

首先，记住下面一行代码：

连接(mapstatetrops，mapdispatchttoprops)(my component)mapstatetrops

这个词翻译过来就是把状态映射到道具，实际上就是把Redux中的数据映射到React中的道具。举个栗子：

const mapstattoprops=(state)={ return {//prop 3360 state . XXX |表示将状态中的一些数据映射到foo3360state.bar}，然后在渲染时使用this.props.foo。

Foo类扩展Component { constructor(道具){ super(道具)；} render(){ return(///这个渲染实际上是state.bar divthis.props.foo/div)的数据)} } foo=connect()(foo)；导出默认Foo然后就可以完成渲染了

mapdispatchttoprops

这个词的翻译就是把各种派单变成道具，让你直接使用

const mapdispatchrops=(dispatch)={//默认传递参数是dispatchread { onclick 3360()={ dispatch({ type : ' increment ' })；} };}class Foo扩展Component { constructor(道具){ super(道具)；} render(){ return(button onclick={ this . props . onclick } click递增/button)} } foo=connect()(foo)；导出默认Foo组件改为上面的，这样就可以直接通过this.props.onClick调用dispatch，这样就不需要在代码中进行store.dispatch了。

这是react-redux的基本介绍

react-redux

按照原来redux的工作流程，当组件中产生一个动作时，会直接触发减速器修改状态，而减速器是一个纯功能，即不能再在减速器中进行异步操作；

但是实际上，在组件中发生动作之后，需要在进入reduce之前完成一个异步任务，比如在进入reduce之前发送ajax请求和获取数据。显然，本机redux不支持此操作

此时，迫切需要一个中间件来处理这种业务场景。目前，最优雅的处理方式自然是redux-saga

核心解释

1.佐贺辅助功能

Redux-saga提供了一些辅助功能，以便在向商店发起某些特定动作时派生任务。让我解释两个辅助功能：takeEvery和takeLatest

takeEvery

TakeEvery就像流水线上的洗碗机。当你来到一个脏盘子时，你会直接执行以下洗碗功能。一旦你邀请了这个洗碗机，他就会一直执行这项工作，永远不会停止接收碗碟的监控过程，触发洗碗子功能。

例如，每次我们单击按钮获取数据时，我们都会启动FETCH_REQUESTED操作。我们希望通过启动任务从服务器获取一些数据来处理这个操作，类似于

Window.addEventLister('xxx '，fn)当调度xxx时，将执行fn方法。

首先，我们创建一个将执行异步操作的任务(即上面的fn):

//put:你认为put等于dispatch//调用：可以理解为实现异步函数，这是阻塞。只有运行以下功能后，它才会继续下去；//可以理解为异步等待！但是书写要直观得多！从“redux-saga/effects”导入{ call，put }导出函数* fetchData(action){ try { const apiAJax=(params)=fetch(URL，params)；const data=yield call(ApiAJax)；yield put({ type : ' FETCH _ succeed '，data })；} catch(错误){ yield put({ type : ' FETCH _ FAILED '，错误})；}}然后在每次发起FETCH_REQUESTED动作时启动上述任务，相当于每次触发名为FETCH_REQUESTED的动作时执行上述任务。代码如下

从“redux-saga”函数* watchfetchdata()导入{ takeEvery } { yield * take every(' fetch _ requested '，fetchdata)}注意：上面的take every函数可以用下面的写法替换

function * watchFetchData(){ while(true){ yield take(' FETCH _ REQUESTED ')；产量叉(fetchData)；}}takeLatest

在上面的例子中，takeEvery允许多个fetchData实例同时启动。在某个时刻，我们可以开始一个新的fetchData任务，尽管之前有一个或多个fetchData没有完成。

如果我们只想获得对最新请求的响应(例如，总是显示最新版本的数据)，我们可以使用takeLatest辅助功能

从“reduce-saga”函数导入{ take latest } * watch fetch data(){ yield * take latest(' fetch _ requested '，fetch data)}与takeEvery不同。任何时候只允许执行一个fetchData任务，这个任务是最后一个启动的。如果之前已经执行过任务，则前一个任务将自动取消

2、效果创造者

Redux-saga框架提供了许多创造效果的功能。让我们简单介绍一些开发中最常用的函数

采取(模式)放(动作)调用(fn，args) fork(fn，args)选择(选择器，args)take(模式)

take功能可以理解为监听未来的动作。它创建一个命令对象，并告诉中间件等待一个特定的动作。生成器将暂停，直到启动与模式匹配的操作，并将继续执行以下语句，也就是说，take是一个阻塞效果。

用法：

函数* watchfetchdata(){ while(true){//监视“FETCH_REQUESTED”类型的操作的执行，在触发此操作之前，不会执行以下yield fork(fetchData)语句yield take(‘FETCH _ REQUESTED’)；产量叉(fetchData)；}}put(动作)

put函数用于发送动作的效果。您可以简单地将其理解为redux框架中的调度函数。在执行一个动作后，减速器会计算出一个新的状态并返回。注意：放也是一种阻挡效果。

用法：

export函数* toggleitemlow(){ let list=[]//发送一个' UPDATE_DATA '类型的Action来更新数据，参数为' DATA:list ` yield put({ type : Action types。update _ data，data:list})}调用(fn，

您可以简单地将调用函数理解为可以调用其他函数的函数。它命令中间件调用fn函数，args是函数的参数。注意：fn函数可以是Generator函数，也可以是返回Promise的普通函数，调用函数也是阻塞效应。

用法：

export const delay=ms=new promise(resolve=settimeout(resolve，ms))export function * remove item(){ try {//这里调用函数调用delay function。delay的函数是一个返回promise的函数，返回yield call (delay，500)} catch(err){ yield put({ type : action types。错误})}} fork (fn，参数)

fork函数与call函数的相似之处在于，它是用来调用其他函数的，但fork函数是非阻塞函数，也就是说，程序执行完yield fork(fn，args)这一行后，会立即执行下一行代码语句，而不是等待fn函数返回结果后再执行下面的语句。

用法：

从“reducx-saga/effects”导入{fork}导出默认函数* root saga(){//将同时执行以下四个Generator函数。不会阻止执行产量叉(添加项目流)产量叉(删除项目流)产量叉(切换leitemflow)产量叉(修改项目)}选择(选择器，参数)

Select函数用于指示中间件调用提供的选择器获取store上的状态数据，你可以简单理解为redux框架中获取Store上的状态数据的同一个函数：store.getState()

用法：

export function * toggletemflow(){//获取listlet templist=yield select(state=state)的具体示例。getTodoList。列表)在“gettodolist”中通过选择效果显示全局状态

**index.js **

从“反应”导入做出反应；从“反应世界”导入ReactDOM从“redux”导入{createStore，applyMiddleware}从《绝代传奇》导入创建一个中间件从《绝代传奇》导入rootSaga ./sagas "从导入计数器"。/Counter "从导入rootReducer ”./reducers ' const saga middleware=createSagaMiddleware()//创建了一个冒险故事中间件实例//下边这句话和下边的两行代码创建商店的方式是一样的//const store=createStore(reducers，applyMiddlecare(中间件))const createStoreWithMiddleware=applyMiddleware(中间件)(createStore)const store=createStoreWithMiddleware(rootdreducer)saga中间件。run(RootSaga)const action=type=store。派单({ type })函数render(){ react DOM。渲染(计数器值={ store。getstate()} onIncrement={()=action(' INCREMENT ')} } ondecreducement={()=action('减量)} } onIncrementAsync=

从“还原传奇/效果”导入{放、叫、拿、叉}；从redux-saga导入{ takeEvery，takeLatest }导出常量延迟=毫秒=新承诺(解析=设置超时(解析，毫秒))；函数*增量同步(){ //延迟1s在执行一操作收益率看涨（延迟，1000);产量投入({ type : ' INITIATIve ' })；}导出默认函数* RootSaga(){//while(true){//yield take(' INVENTION _ ASYNC ')；//屈服叉(递增同步);//} //下面的写法与上面的写法上等效yield * take every(' INCREMENT _ ASYNC '，incrementAsync)} reductor。射流研究…

导出默认函数计数器（状态=0,操作){ switch(动作。type){ case ' INCREMENT ' :返回状态1个案例' DEFAULT ' :返回状态- 1个案例“INCLUDE _ ASYNC”:返回状态默认值：返回状态}}从上面的代码结构可以看出redux-saga的使用方式还是比较简单的，相比较之前的回家的框架的CounterApp，多了一个萨迦的文件减速器文件还是之前的使用方式

redux-saga基本用法总结：

使用创建一个中间件方法创建冒险故事的中间件，然后在创建的回家的的商店时，使用applyMiddleware函数将创建的冒险故事中间件实例绑定到商店上，最后可以调用冒险故事中间件的奔跑函数来执行某个或者某些中间件。在冒险故事的中间件中，可以使用takeEvery或者takeLatest等应用程序接口来监听某个行动，当某个行为触发后佐贺可以使用呼叫发起异步操作，操作完成后使用放函数触发行动，同步更新国家，从而完成整个状态的更新好吧，故事到这里就接近尾声了，以上主要介绍了反应还原和redux-saga目前回家的全家桶主流的一些产品，接下来，主要会产出一下根据源码，手写一下回家的和反应还原的轮子

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。