reactjs - 如何在组件上按顺序调用 saga?
问题描述
问题
我想func()
在按下increase_number and decrease_number
按钮时打电话,但我不知道该怎么做。
我可以这样做吗?(它增加一个数字,然后减少。)
还是我必须创建一个新的动作和传奇?
谢谢阅读 !
源代码
Redux(带 sagas)
import { createAction, handleActions } from 'redux-actions';
import { delay } from 'redux-saga';
import { all, put, select, takeEvery } from 'redux-saga/effects';
export const action_creators = {
increase_number: createAction('increase_number'),
decrease_number: createAction('decrease_number'),
set_number_success: createAction('set_number_success')
};
const state = {
number: 0
}
function* increase_number () {
const state = yield select((state) => state);
yield delay(1000);
yield put(action_creators.set_number_success({ number:++state.number }));
}
function* decrease_number() {
const state = yield select((state) => state);
yield put(action_creators.set_number_success({ number:--state.number }));
}
export function* saga() {
yield all([
takeEvery('increase_number', increase_number),
takeEvery('decrease_number', decrease_number)
]);
}
export default handleActions({
set_number_success: (state, action) => {
const new_number = action.payload.number;
console.log(new_number);
return { ...state, number:new_number };
}
}, state);
零件
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { put, take } from 'redux-saga/effects';
import { action_creators } from './redux';
function* func () {
yield put(action_creators.increase_number());
yield take(action_creators.set_number_success());
yield put(action_creators.decrease_number());
}
class App extends React.PureComponent {
render() {
return [
<div>{this.props.number}</div>,
<button type="button" onClick={() => this.props.increase_number()}>increase_number</button>,
<button type="button" onClick={() => this.props.decrease_number()}>decrease_number</button>,
<button type="button">increase_number and decrease_number</button> <= Here.
]
}
}
function map_state_to_props(state) {
return {
number: state.number
}
}
function map_dispatch_to_props(dispatch) {
return bindActionCreators({
increase_number: action_creators.increase_number,
decrease_number: action_creators.decrease_number
}, dispatch);
}
export default connect(map_state_to_props, map_dispatch_to_props)(App);
解决方案
首先,您func
应该在 saga 中而不是在组件中,因为它是一个 saga。
其次,是的,您需要一个单独的操作,因为它是一个单独的副作用,它结合了其他两个副作用,但仍然如此。
您可以通过添加另一个最简单的方法来实现takeEvery()
:
...
function* increase_and_decrease() {
yield call(increase);
yield call(decrease);
}
export function* saga() {
yield all([
takeEvery('increase_number', increase_number),
takeEvery('decrease_number', decrease_number),
takeEvery('incerase_and_decrease', increase_and_decrease);
]);
}
剩下的就是将组件中的新操作拉入mapDispatchToProps
并调用按钮单击。
推荐阅读
- javascript - 带有javascript的烛台图
- reactjs - Next.js 路由:动态与精确
- excel - 打开csv文件时禁用excel将字符串转换为日期
- julia - 运行 Julia 代码时未显示 ProfileView 绘图
- java - 如何使用 Java 从 z/OS 读取 VSAM 文件?
- mysql - 如何对mysql表中的多个列进行连接
- python - Python-在执行 K-Means 聚类后在条件下更改 RGB 值
- sql - SQL 查询以获取基于单个日期时间列的特定状态所花费的时间
- php - 从单选按钮更新数据库表。我正在使用 Codeigniter 4
- java - 如何防止在 Spring Boot 的控制台中打印“重试策略用尽”异常?