我对使用Sagas有疑问。
我有一个按钮,当单击该按钮时,它会触发一个调用动作的函数:
Component.js
onClickChainIdentifier = (event) => {
//action called
this.props.getChains();
//next function to be called
this.teste();
}
}
Action.js
export function getChains(){
return {
type: GET_CHAINS,
}
}
在分派此操作后,它会触发一个常量GET_CHAINS,它调用一个传奇:
Saga.js
export function* getAllChains() {
const requestURL = process.env.PATH_API.GET_CHAINS;
try {
const response = yield call(requestGet, requestURL);
yield put(getChainsSuccess(response));
} catch (err) {
yield put(getChainsError(err));
}
}
export default function* sagasApp() {
yield [
fork( takeLatest, GET_CHAINS, getAllChains ),
]
}
我希望在api返回(成功或错误)之后,我可以调用组件内部的 this.teste 函数。 我如何做到这一点?
预先感谢您的帮助。
答案 0 :(得分:1)
您可以使用标志来控制何时以及是否应该渲染组件。这是一种常见的解决方案,用于呈现后备UI(例如,微调框或文本),以等待异步进程(传奇,thunk,API服务等)完成并且组件具有呈现其自身所需的全部内容。 / p>
检查我发布的解决方案here,您可以访问此CodeSandBox,其中显示了如何使用标志来解决它。
答案 1 :(得分:1)
您可以将回调传递给getAllChains
函数:
onClickChainIdentifier = (event) => {
this.props.getChains(() => {
this.teste();
});
}
export function* getAllChains(callback) {
const requestURL = process.env.PATH_API.GET_CHAINS;
try {
const response = yield call(requestGet, requestURL);
yield put(getChainsSuccess(response));
if (callback) {
callback();
}
} catch (err) {
yield put(getChainsError(err));
}
}
答案 2 :(得分:0)
正如jank所指出的,您可以在lifecycle methods中测试组件的状态,并在满足某些条件时调用函数。例如,利用jank的示例:
componentDidUpdate (prevProps) {
if (this.props.pending && !prevProps.pending) {
this.props.test()
}
}
每次test
道具从pending
更改为false
时,都会呼叫true
。 test
函数可能有副作用,例如从服务器获取或使用某些浏览器API。使用更新的Hooks API useEffect,可以实现相同的功能。