在angular redux应用程序中进行API调用

Question

我想从一个基本的angular-redux to do app.Also从服务器获取json数据，请解释一下数据流是如何从store.If中发生的，你可以友好地参考任何关于这个问题的博客，这将是很棒的。我不能从ng2-redux或ngrx.Thank你提前做太多的意义。

Answer 1

应该在Middleware中进行API调用。阅读这篇book，它是免费的，它会消除你的大部分疑问，它在我开始学习的时候就为我做了。

Answer 2

您应该使用Epic这样的中间件进行API调用(称为副作用)。

让我们考虑一个todo应用的例子，你需要从服务器获取todo：

const BASE_URL = "https://some-server/api/";

@Injectable()
export class TodoEpics implements EpicMiddleware {

    constructor(private httpService: HttpClient) {
    }

    @dispatch()
    startLoading() {
        return changeTodoStatus("loading");
    }

    getTodosEpic = (action$: ActionsObservable<GetTodosAction>, state$: StateObservable<AppState>): Observable<Action> => {
        return action$.pipe(
            ofType(todoConstants.GET_TODOS),
            tap((action) => this.startLoading()),
            mergeMap(action => this.httpService.get<GetTodosResponse>(`${BASE_URL}/todos`).pipe(
                map((response) => getTodosSucceeded(response.items)),
                catchError(error => of(getTodosFailed(error)))
            ))
        );
    }

    getEpics(): Epic[] {
        return [
            this.getTodosEpic
        ];
    }
}

在主存储模块中：

import { NgModule } from '@angular/core';
import { NgReduxModule, NgRedux, DevToolsExtension } from '@angular-redux/store';
import { createLogger } from 'redux-logger';
import { AppState } from './models';
import { rootReducer } from './reducers';
import { TodoEpics } from "../todo-list/todo-list-state-management/epics";
import { combineEpics, createEpicMiddleware } from "redux-observable";
import { environment } from "../../environments/environment";

const epicMiddleware = createEpicMiddleware();

@NgModule({
    imports: [NgReduxModule],
    providers: [
        TodoEpics
    ]
})
export class StoreModule {
    constructor(private store: NgRedux<AppState>, private todoEpics: TodoEpics) {
        const rootEpic = combineEpics(
            ...this.todoEpics.getEpics()
        );
        const middelwares = [epicMiddleware]
        const devMiddelwares = [...middelwares, createLogger()];
        const prodMiddelwares = [...middelwares];

        store.configureStore(
            rootReducer,
            environment.production ? prodMiddelwares : devMiddelwares);

        epicMiddleware.run(rootEpic)
    }
}

一个完整的例子可以在这里找到：Todo app using angular-redux, redux-observable and epics