@actra-development-oss/redux-observable-decorator 中文文档教程

Question

@actra-development-oss/redux-observable-decorator

Redux Observable 的装饰器 - 从（未维护的？）redux-observable-decorator 分叉以支持当前版本的 redux / redux -observable

当使用带有 ng-redux 和 redux-observable 的 Redux 和 Angular 时，通常将史诗创建为可注入类，并且在配置商店时 - 为每个史诗创建一个史诗中间件，或使用 combineEpics：

@Injectable()
export class SomeEpics {
    epicOne = (action$) => action$.ofType('PING').mapTo({type: 'PONG'});
    epicTwo = (action$) => action$.ofType('ACTION_IN').mapTo({type: 'ACTION_OUT'});
}

@NgModule({
})
export class AppModule {
    constructor(ngRedux:NgRedux, someEpics:SomeEpics) {
        let epics = combineEpics(
            someEpics.epicOne,
            someEpics.epicTwo
        )

        ngRedux.configureStore(reducer,[createEpicMidleware(epics)])

        // or 

        let epicOneMiddleware = createMiddleware(someEpics.epicOne);
        let epicTwoMiddleware = createMiddleware(someEpics.epicOne);

        ngRedux.configureStore(reducer,[epicOneMiddleware, epicTwoMiddleware)])
    }
}

此装饰器旨在更容易标记类中的哪些属性/方法是史诗，以简化为您的应用程序创建史诗中间件的过程。

import { Epic } from 'redux-observable-decorator'
@Injectable()
export class SomeEpics {
    @Epic() epicOne = (action$) => action$.ofType('PING').mapTo({type: 'PONG'});
    @Epic() epicTwo = (action$) => action$.ofType('ACTION_IN').mapTo({type: 'ACTION_OUT'});
}

import { createEpics } from 'redux-observable-decorator';
@NgModule({
})
export class AppModule {
    constructor(ngRedux: NgRedux, someEpics: SomeEpics) {
        const {middleware, epic} = createEpics(someEpics)

        ngRedux.confgureStore(reducer, [middleware]);
        middleware.run(epic);
    }
}

这也可以与 vanilla redux 一起使用——如单元测试中所示……

class Test {
    @Epic() epic = (action$) => action$.ofType('TEST_IN').mapTo({ type: 'TEST_OUT' });
}

const reducer = (state = [], action) => state.concat(action);
const epics = new Test();
const {middleware, epic} = createEpics(epics);
const store = createStore(reducer, applyMiddleware(epicMiddleware));
middleware.run(epic);