Угловой 6 + @angular-redux/store. Правильный способ реализации избыточного толка

Question

Я использую @angular-redux/store а также redux-thunk в моем угловом приложении 6, и у меня возникают проблемы с их настройкой.

Я не хотел бы использовать redux-observable потому что обычно в react Я могу добиться того же с redux-thunk только без добавления новой сущности (epics, представлен redux-observable) в шаблоне дизайна редукса.

Вот как я настроил магазин:

constructor(
        public store: NgRedux<StoreModel>,
        devTools: DevToolsExtension,
        ngReduxRouter: NgReduxRouter
    ) {
        store.configureStore(
            StoreReducer,
            {},
            [thunk],
            devTools.isEnabled()
                ? [devTools.enhancer(), applyMiddleware(thunk)]
                : [applyMiddleware(thunk)]
        );

        // Enable syncing of Angular router state with our Redux store.
        if (ngReduxRouter) {
            ngReduxRouter.initialize();
        }

        // Enable syncing of Angular form state with our Redux store.
        provideReduxForms(store);
    }

Это мои два действия:

@dispatch()
public fetchUsersThunk() {
    return of([new User('test user 1')]).pipe(
        map((users: User[]) => this.fetchUsersFulfilled(users))
    );
}

@dispatch()
public fetchUsersFulfilled(users: User[]): UserAction {
    return {
        type: UserActions.FETCH_USERS,
        users
    };
}

Так что со стороны я могу назвать свое действие fetchUsersThunk который должен делать все вещи и обновлять состояние.

Я получаю следующую ошибку:

AppComponent_Host.ngfactory.js? [см]:1 ОШИБКА Ошибка: Действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий.

Словно applyMiddleware(thunk) не работает.

Я использовал одну и ту же модель множество раз с react и все работает отлично. Любая идея вопроса здесь с @angular-redux/store? Я плохо использую configureStore метод? или dispatch() декоратор?

Answer 1

Это лучшее решение, которое я нашел, поделиться им, чтобы увидеть, можно ли сделать это немного лучше.

Магазин:

store.configureStore(
            StoreReducer,
            {},
            [thunk], // plain middleware thunk as middlewares
            devTools.isEnabled() ? [devTools.enhancer()] : []
        );

Действия:

public dispatchFetchUsersThunk() {
    return this.fetchUsersThunk()(this.ngRedux.dispatch);
}

@dispatch()
public fetchUsersThunk() {
    return (disp: any) => {
        return of([new User('test user 1'), new User('test user 2')])
            .pipe(map(val => disp(this.fetchUsersFulfilled(val))))
            .pipe(
                tap(val => {
                    console.log('tapping'); // second output
                })
            );
    };
}

public fetchUsersFulfilled(users: User[]): UserAction {
    console.log('fetch users fulfilled'); // first output
    return {
        type: UserActions.FETCH_USERS,
        users
    };
}

Вот основное действие для вызова:

this.actions.dispatchFetchUsersThunk().subscribe(val => {
            console.log('main subscription'); // last output
        });

Мне нужно дополнительное действие dispatchFetchUsersThunk который не является dispatch() декоратор, потому что я хочу вернуть наблюдаемую информацию, чтобы знать, когда будут выполнены все внутренние отправки, откуда я буду вызывать действие (как вы можете видеть на консоли выше и в комментариях, порядок, кажется, соблюдается)