angular - Angular - 调度动作时出现“TypeError:无法冻结”
问题描述
我正在开发一个使用 ngrx 商店和效果的 Angular 应用程序。我明白了
“类型错误:无法冻结”
从我的组件调度操作时出错。我为文件上传功能编写了它。我认为我正在改变状态,但无法弄清楚在哪里以及如何解决它。这是我的详细代码:
Actions:
export enum FileUploadActionTypes {
UploadFile = '[File Upload] Upload File',
UploadFileSuccess = '[File Upload] Upload File Success',
UploadFileFailure = '[File Upload] Upload File Failure'
}
export class UploadFile implements Action {
readonly type = FileUploadActionTypes.UploadFile;
constructor(public payload: any) {}
}
export class UploadFileSuccess implements Action {
readonly type = FileUploadActionTypes.UploadFileSuccess;
constructor(public payload: any) {}
}
export class UploadFileFailure implements Action {
readonly type = FileUploadActionTypes.UploadFileFailure;
constructor(public payload: any) {}
}
export type FileUploadActionsUnion = UploadFile | UploadFileSuccess | UploadFileFailure;
Service:
export class FileUploadService {
constructor(private httpClient: HttpClient) {
}
uploadFile(file: any): Observable<any> {
return this.httpClient.post<any[]>('/api-url/', file);
}
}
Effect:
@Effect()
uploadFile$ = this.actions$.pipe(
ofType<UploadFile>(FileUploadActionTypes.UploadFile),
mergeMap(action => this.fileUploadService.uploadFile(action.payload).pipe(
map(result => new UploadFileSuccess(result)),
catchError(error => of(new UploadFileFailure(error)))
))
)
Reducer:
export interface State {
fileUploadSuccessResponse: any,
fileUploadFailureResponse: any
}
export const initialState = {
fileUploadSuccessResponse: null,
fileUploadFailureResponse: null
}
export const getFileUploadSuccessResponse = state => state.fileUploadSuccessResponse;
export const getFileUploadFailureResponse = state => state.fileUploadFailureResponse;
export function reducer(state: State = initialState, action: FileUploadActionsUnion):State {
switch(action.type) {
case FileUploadActionTypes.UploadFile: {
return {
...state
}
}
case FileUploadActionTypes.UploadFileSuccess: {
return {
...state,
fileUploadSuccessResponse: action.payload
}
}
case FileUploadActionTypes.UploadFileFailure: {
return {
...state,
fileUploadFailureResponse: action.payload
}
}
default: {
return state;
}
}
}
解决方案
看来您正在使用ngrx-store-freeze
npm 包。此软件包可确保您对商店所做的任何更新都不会直接发生变异。此过程的一部分是将 an应用于您尝试调度的操作Object.freeze()
的对象。payload
即this.store.dispatch(new UploadFiles(file))
。
控件的默认行为<input type="file">
是将其值保存为FileList
对象。因为此对象是原始数据类型,Javascript 会将其视为只读,从而阻止您写入它的属性。这也解释了为什么Object.freeze()
会失败,因为它无法将冻结应用于只读数据类型。
我最近使用 NGRX 和<input type="file">
表单控件遇到了同样的问题。修复方法是FileList
在分派到商店之前将其克隆到一个新对象中。
onChange(control: FormControl) {
const primitiveFileList: FileList = control.value;
const clonedFiles = { ...primitiveFileList };
this.store.dispatch(new UploadFiles(clonedFiles));
}
如果其他人知道这种方法的任何潜在缺陷,我会很感激您的意见。
推荐阅读
- vba - 提示用户打开工作簿并另存为新工作簿
- java - HttpClient SocketTimeoutException 处理
- android - 如何定义返回 Kotlin 中 RadioButton 的当前值的属性?
- java - 在线程“main”java.lang.ArrayIndexOutOfBoundsException 中获取错误异常:0
- c - 无法解决方法重载
- javascript - Ajax 在 Django 帖子中不起作用
- ios - ios firebase 用户等于 nil
- javascript - 使用 ForEach 时云函数中的连接错误
- php - 将 PHP 表单发送到 MySQL 数据库
- php - PHP 数字:将 1.4EN (N >40) 转换为十进制并删除无用的零位