间件redux-saga使用React
一、下载
yarn add redux-saga
npm i redux-saga
二、使用
以计数器为例子来学习 redux-saga 的使用。
通过 redux-saga 实现以下效果:
在计数器中,从输入框中输入一个值,延迟 1 秒后,再通过这个值乘以 2 后再修改仓库中的数据。
1、组件中触发事件
<input type="text" onBlur={(e) => {
dispatch({
type: 'inputCountAsync',
payload: e.target.value
})
}}/>
2、创建模块的 saga 文件
1)创建侦听函数
当 takeEvery 的第一个参数,在组件被 dispatch 调用了,就会执行 takeEvery 的第二个参数:
import { takeEvery } from 'redux-saga/effects'
function inputCount() {
}
// 创建一个侦听函数
function* watchCount() {
// 第一个参数:侦听的 action 的 type 值
yield takeEvery('inputCountAsync', inputCount)
}
//最后,将侦听函数暴露出去:
export default watchCount;
2)处理 saga 函数(inputCount)
上例中的 inputCount 函数,就是一个 saga 函数,具有以下几个特点:
- 默认第一个参数都是 action 对象,该 action 对象就是组件中 dispatch 传递的 action;
- 在 saga函数中,可以通过 call() 方法去调用异步方法,通过 yield 来接收异步的请求结果;
- 通过 put() 方法来代替dispatch,传递一个 action 对象,最终调用 reducer 修改数据。
function* inputCount(action) { // { type: 'inputCountAsync', payload: 10 }
// 调用异步方法,发送异步请求,接收异步请求的结果
const res = yield call(setCountAsync, action.payload);
// 将异步获取到的结果更新的仓库中去
yield put({ type: 'inputCount', payload: res});
}
其中,setCountAsync 方法是我们用来模拟异步请求的方法,暂时就直接写在 sagas.js 文件中:
// 这个代码以后是写在 api 中的
function setCountAsync(payload) {
return new Promise((resolve) => {
setTimeout(() => {
// 获取到用户在页面中输入的值,返回一个乘以 2 的新值
const newCount = payload * 2;
resolve(newCount)
}, 1000);
})
}
3、创建根 saga 文件
我们在 redux 的根目录创建一个 rootSaga.js 文件,在该文件中启动所有模块中的侦听函数:
import { all } from 'redux-saga/effects'
import watchCount from './counter/sagas.js'
function* rootSaga() {
yield all([watchCount()])
}
export default rootSaga;
4、在 store 中引入中间件
在 store.js 文件引入 saga 中间件,并执行 rootSaga,启动所有侦听函数:
import { createStore, applyMiddleware } from "redux";
// 1、引入 redux-saga 模块,获取到 createSagaMiddleware 方法
import createSagaMiddleware from 'redux-saga'
// 4、引入根 saga 文件
import rootSaga from './rootSaga.js'
// 引入所有合并好的 reducers
import combineReducers from './combineReducers.js'
// 2、调用 createSagaMiddleware 方法,得到 saga 对象
const saga = createSagaMiddleware();
// 将合并好的 reducers 全部添加到 store 中
const store = createStore(
combineReducers,
// 3、将 saga 中间件加入到 redux 中
applyMiddleware(saga)
);
// 5、运行 saga
saga.run(rootSaga)
export default store;
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiejahg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22