我有一个使用Visual Studio 2019和默认Web模板创建的ASP.NET React Redux项目。
此站点要做的一件事是处理一系列操作。有些动作需要用户输入才能进行下一个动作,而有些则不需要。
通过将索引保持在Redux状态来访问当前正在处理的操作。
如果当前操作需要用户输入(如单击按钮),那么事情就容易了。在按钮的onClick中,我触发将操作索引更改为reducer中的下一个索引。
问题是,如果当前的动作只是应该开始的动作,先做它的事情,然后进行下一步。
我能找到或想到的唯一方法是在渲染React组件期间将脚本插入页面。该脚本调用Redux操作来完成工作,然后触发当前操作索引的增加。
这可行,但是浏览器会在状态更改期间给出并提示错误/更改状态。我明白了,可以看到问题了,所以我想解决这个问题。
我确实通过在启动工作时设置一个标志来确保它不会一遍又一遍地触发,然后防止该工作发生多次。该警告仍然令我担忧。
因此,对所有聪明的JS / React / Redux员工来说,问题是:当我的动作是无需任何用户输入即可进行的操作时,如何触发一些工作发生?
以下是一些相关代码:
状态界面:
export interface UpdateState {
actionList: any;
currentItemIndex: number;
processingItem: boolean;
}
操作:
export interface ProcessItemAction { type: 'PROCESS_ITEM', proceed: boolean }
动作创建者:
export const actionCreators = {
processItem: (): AppThunkAction<KnownAction> => (dispatch, getState) => {
...
if (currentAction.type == 'USER_INPUT') {
// do something based on user input
}
else {
// kick off the action and at the end increment the current action index
}
dispatch({ type: 'PROCESS_ITEM', proceed });
}
减速器:
case 'PROCESS_ITEM':
return {
...state, processingItem: false, currentItemIndex: action.proceed ? state.currentItemIndex + 1 : state.currentItemIndex
};
那部分是关于启动动作,然后增加我不知道的当前动作索引。