Javascript 使用ApiService将redux工具包方法CreateSynchThunk与Angular HttpClient集成

我试图在一个角度应用程序中实现

@reduxjs/toolkit

如何将角度服务作为参数传递给

createAsyncThunk

的回调，而不是使用

fetch

来自

最后，我想使用

HttpClientModule

来获取数据

编辑 这是我的方法，有更好的方法还是更“角度化”的方法来实现

// projects.slice.ts


export const INITIAL_STATE_PROJECTS: IProjectsState = {
    projectList: [],
};

export const fetchProjects = createAsyncThunk(
    'projects/fetchProjects',
    async (projectsService: ProjectsService) => {
        const response = await projectsService.getAllProjects();
        return response;
    }
);

const projectsSlice = createSlice({
    name: 'projects',
    initialState: INITIAL_STATE_PROJECTS,
    reducers: {

    },
    extraReducers: {
        [fetchProjects.fulfilled.toString()]: (state, action) => {
            state.projectList = action.payload;
        },
    }
});

export default projectsSlice.reducer;

//projects.service.ts
@注射的({
providedIn:'根'
})
导出类项目服务{
私有服务器url=environment.api\u url；
构造函数（私有http:HttpClient）{}
异步getAllProjects（）：承诺{
返回新承诺（（解决、拒绝）=>{
const headers=新的HttpHeaders（）；
headers.append（'Content-Type'，'application/json'）；
this.http.get（`this.serverURL}/projects`，{headers，withCredentials:true}）
.订阅（异步（res）=>{
决议（res）；
}，（错误）=>{
拒绝（错误）；
});
});
}
}

//project-list.component.ts
@组成部分({
选择器：“应用程序项目列表”，
templateUrl:'./project list.component.html'，
样式URL:['./项目列表.component.scss']
})
导出类ProjectListComponent实现OnInit{
@选择（（state:IAppState）=>state.projects.projectList）只读项目$：可观察；
建造师(
私人项目服务：项目服务，
私有ngRedux:ngRedux
) { }
ngOnInit（）：void{
this.ngRedux.dispatch（fetchProjects（this.projectsService））；
}
}

我希望我正确理解了这一点-如果不让我知道，但如果我知道，您可以将其封装在一个封闭函数中：

const fetchUserById = (apiService: ApiService, userId: numer) => {
    return createAsyncThunk(
        'users/fetchById',
        async (userId: number) => {
            const response = await apiService.getUserById(userId);
            return (await response.json()) as MyData
        }
    )
}

现在你可以这样称呼它：

const user = fetchUserById(apiService, 1);

---

是什么阻碍了您仅使用apiService.getUserById（userId）？我需要某种方法将apiService实例传递给回调，以便调用

getUserById

。为什么需要传递实例？服务在Angular中通常是单例的，所以应该只有一个实例存在。我的意思是单例实例。我很困惑，因为我在平面ts文件中实现了redux，而其余的应用程序使用类。我没有办法注入服务，所以我想知道如何使用HttpClient。Redux文档只考虑反应。那你为什么在一个普通的js文件中这样做呢？这基本上是我想要的，但它不是解决方案，CreateAynchThunk需要分配给fetchUserById，而不是由它返回。在我做更多的研究之后，我会用更多的信息编辑我的问题。我所要求的可能不是我问题的解决方案。

// project-list.component.ts

@Component({
    selector: 'app-project-list',
    templateUrl: './project-list.component.html',
    styleUrls: ['./project-list.component.scss']
})
export class ProjectListComponent implements OnInit {
    @select((state: IAppState) => state.projects.projectList) readonly projects$: Observable<any[]>;

    constructor(
        private projectsService: ProjectsService,
        private ngRedux: NgRedux<IAppState>
    ) { }

    ngOnInit(): void {
        this.ngRedux.dispatch<any>(fetchProjects(this.projectsService));
    }
}

const fetchUserById = (apiService: ApiService, userId: numer) => {
    return createAsyncThunk(
        'users/fetchById',
        async (userId: number) => {
            const response = await apiService.getUserById(userId);
            return (await response.json()) as MyData
        }
    )
}

const user = fetchUserById(apiService, 1);