在NGRX效果中避免进行冗余的API调用可以通过以下几个步骤来解决:
使用一个状态变量来跟踪API调用是否已经完成。可以在应用的状态中添加一个布尔值的属性,例如apiCallCompleted
,初始值为false。
在发起API调用之前,检查apiCallCompleted
的值。如果为true,则表示之前已经完成了相同的API调用,不需要再次发送请求。
在API调用成功或失败时,更新apiCallCompleted
的值。成功时将其设置为true,失败时设置为false。
下面是一个示例代码,展示如何在NGRX效果中实现上述解决方法:
// 定义一个接口来表示应用的状态
interface AppState {
apiCallCompleted: boolean;
// 其他的状态属性...
}
// 在reducers中初始化应用的状态
const initialState: AppState = {
apiCallCompleted: false,
// 其他的初始状态...
};
// 创建一个reducer来处理状态的更新
const appReducer = createReducer(
initialState,
on(ApiActions.apiCallSuccess, (state) => ({ ...state, apiCallCompleted: true })),
on(ApiActions.apiCallFailure, (state) => ({ ...state, apiCallCompleted: false })),
// 其他的reducer...
);
// 在effects中使用一个状态选择器来获取apiCallCompleted的值
@Injectable()
export class ApiEffects {
constructor(
private actions$: Actions,
private apiService: ApiService,
private store: Store
) {}
apiCall$ = createEffect(() =>
this.actions$.pipe(
ofType(ApiActions.apiCall),
withLatestFrom(this.store.select(state => state.apiCallCompleted)),
filter(([action, apiCallCompleted]) => !apiCallCompleted), // 当apiCallCompleted为false时才会继续执行
switchMap(([action, apiCallCompleted]) =>
this.apiService.callApi().pipe(
map(response => ApiActions.apiCallSuccess({ data: response })),
catchError(error => of(ApiActions.apiCallFailure({ error })))
)
)
)
);
}
在上述示例中,我们使用apiCallCompleted
来跟踪API调用是否已经完成。在apiCall$
的effect中,我们使用withLatestFrom
操作符来获取apiCallCompleted
的值,并使用filter
操作符来仅在apiCallCompleted
为false时继续执行API调用。
这样,即使在多次触发apiCall
动作时,只有第一次触发的API调用会被发送,后续的调用将被忽略,避免了冗余的API调用。