Skip to content

Update to latest versions of redux, redux-observable, rxjs #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 8, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed .DS_Store
Binary file not shown.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
# misc
.vscode
.DS_Store

# Logs
logs
Expand Down Expand Up @@ -32,7 +33,7 @@ build/Release
# Dependency directories
node_modules
jspm_packages
release
release

# Optional npm cache directory
.npm
Expand Down
1 change: 1 addition & 0 deletions .node-version
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
10.13.0
47 changes: 44 additions & 3 deletions CHANGELOG.MD
Original file line number Diff line number Diff line change
@@ -1,5 +1,46 @@
# Change Log


# 2.0.0
## BREAKING CHANGES
* As of version 1, __redux-observable__ requires you to pass in the rootEpic through `epicMiddleware.run(rootEpic)` after creating a store. Now you'll need to pass in all epic classes to a separate `combineDecoratedEpics` call.

_Before_
```ts
import { createEpics } from 'redux-observable-decorator';

class NgModule{
constructor(
private store: NgRedux,
private epicClass1: EpicClass1,
private epicClass2: EpicClass2
) {
const epicMiddleware = createEpics(epicClass1, epicClass2, options);
store.configureStore(reducer, state, [epicMiddleware]);
}
}
```

_Now_
```ts
import { createEpicMiddleware } from 'redux-observable';
import { combineDecoratedEpics } from 'redux-observable-decorator';

class NgModule{
constructor(
private store: NgRedux,
private epicClass1: EpicClass1,
private epicClass2: EpicClass2
) {
const epicMiddleware = createEpicMiddleware(options);
store.configureStore(reducer, state, [epicMiddleware]);
epicMiddleware.run(combineDecoratedEpics(epicClass1, epicClass2));
}
}
```

* Update peer dependencies to redux 4, redux-observable 1 and rxjs 6

# 1.2.0-0

* Update dependencies to support redux-observable 0.15+
Expand All @@ -20,14 +61,14 @@ class TestOne {
.ofType('TEST_A_IN')
.mapTo({ type: 'TEST_A_OUT', payload: deps.foo() });
}

const epicMiddleware = createEpics(epicOne, { dependencies: {
foo: function() { return 'bar'; }
}});
}});
```
# 1.0.0

## Breaking Change
## Breaking Change

* Change `createEpic` to take second generic argument to match new `EpicMiddleware<T,S>` interface. [#5](https://github.com/angular-redux/redux-observable-decorator/pull/5) closes [#6](https://github.com/angular-redux/redux-observable-decorator/issues/6)
* Addresses breaking change in [redux-observable 0.13.0](https://github.com/redux-observable/redux-observable/blob/master/CHANGELOG.md#breaking-changes
Expand Down
55 changes: 31 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,59 +6,65 @@

Decorators for Redux Observable

When using Redux with Angular with ng-redux and redux-observable, it's common to create your epics as an injectable class, and when configuring the store - creating an epic middleware for each one, or using combineEpics:
When using Redux with Angular with __angular-redux/store__ and __redux-observable__, it's common to create your epics as an injectable class, and when configuring the store - creating an epic middleware for each one, or using `combineEpics`:

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

@NgModule({

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

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

// or
);
let epicMiddleware = createEpicMidleware();

ngRedux.configureStore(reducer,[epicMiddleware]);
epicMiddleware.run(epics);

// or

let epicOne = createMiddleware(someEpics.epicOne);
let epicTwo = createMiddleware(someEpics.epicOne);
let epicTwo = createMiddleware(someEpics.epicTwo);

ngRedux.configureStore(reducer,[epicOne, epicTwo)])
ngRedux.configureStore(reducer,[epicOne, epicTwo]);
}
}
```

This decorator is intended to make it easier to mark which properties / methods in a class are Epics to simplify creating the epic middleware for your application.

```ts
import { Epic } from 'redux-observable-decorator'
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'});
@Epic() epicOne = (action$) => action$.ofType('PING').pipe(mapTo({type: 'PONG'}));
@Epic() epicTwo = (action$) => action$.ofType('ACTION_IN').pipe(mapTo({type: 'ACTION_OUT'}));
}
```

```ts
import { createEpics } from 'redux-observable-decorator';
import { combineDecoratedEpics } from 'redux-observable-decorator';
import { createEpicMiddleware } from 'redux-observable';

@NgModule({

})
export class AppModule {
constructor(ngRedux:NgRedux, someEpics:SomeEpics) {
let epics = createEpics(someEpics)

ngRedux.confgureStore(reducer,[epics])

let epics = combineDecoratedEpics(someEpics);
const epicMiddleware = createEpicMiddleware();

ngRedux.configureStore(reducer,[epicMiddleware]);
epicMiddleware.run(epics);
}
}
```
Expand All @@ -67,25 +73,26 @@ This can be used with vanilla redux also - as seen in the unit tests...

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

const reducer = (state = [], action) => state.concat(action);
const epics = new Test();
const epicMiddleware = createEpics(epics);
const epicMiddleware = createEpicMiddleware(epics);
const store = createStore(reducer, applyMiddleware(epicMiddleware));
epicMiddleware.run(combineDecoratedEpics(epics));
```

# Inspiration

The `@Effect` decorator from [ngrx/effects](https://github.com/ngrx/effects)

# Todo
# Todo

* [ ] Better docs
* [ ] Publish on NPM
* [ ] Improve tests
* [ ] Get test coverage working
* [ ] Some Anglar 2 / integration tests
* [ ] Get test coverage working
* [ ] Some Anglar 2 / integration tests
* [ ] Example App
* [ ] Strategy for lazy loading epics (to support code-splitting)?
7 changes: 4 additions & 3 deletions karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ module.exports = function (karma) {
singleRun: false,
webpackServer: { noInfo: false },
webpack: {
mode: 'development',
devtool: 'inline-source-map',
resolve: {
extensions: ['.ts', '.js']
Expand All @@ -57,7 +58,7 @@ module.exports = function (karma) {
]
},
{
test: /\.ts?$/,
test: /\.ts$/,
exclude: /(node_modules)/,
loader: 'ts-loader'
},
Expand All @@ -79,8 +80,8 @@ module.exports = function (karma) {
failOnHint: false,
resourcePath: 'src'
}
})
}),
]
}
});
};
};
52 changes: 21 additions & 31 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "redux-observable-decorator",
"version": "1.2.0-0",
"version": "2.0.0",
"description": "Decorators for Redux Observable",
"main": "./release/index.js",
"files": [
Expand All @@ -9,12 +9,11 @@
"typings": "./release/index.d.ts",
"scripts": {
"test": "karma start --single-run",
"prepare": "npm run build",
"build": "npm run build:js",
"build:js": "ngc -p tsconfig.dist.json",
"build:js": "tsc --build tsconfig.dist.json",
"prebuild": "npm run test && npm run clean:pre",
"postbuild": "npm run clean:post",
"clean:pre": "rimraf release",
"clean:post": "rimraf **/*.ngsummary.json",
"postversion": "npm run build"
},
"repository": "git+https://github.com/angular-redux/redux-observable-decorator.git",
Expand All @@ -25,42 +24,33 @@
},
"homepage": "https://github.com/angular-redux/redux-observable-decorator#readme",
"peerDependencies": {
"redux": "3.*",
"redux-observable": "^0.13.0 || ^0.14.0 || ^0.15.0 || ^0.16.0"
"redux-observable": "^1.0.0"
},
"devDependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/compiler-cli": "4.0.0",
"@angular/core": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@angular/platform-server": "4.0.0",
"@types/core-js": "^2.5.0",
"@types/jasmine": "^2.5.38",
"@types/node": "^6.0.52",
"awesome-typescript-loader": "^3.0.0-beta.17",
"core-js": "^2.4.1",
"@types/webpack-env": "^1.13.6",
"core-js": "^2.6.1",
"istanbul-instrumenter-loader": "^1.1.0",
"jasmine-core": "^2.5.2",
"karma": "^1.4.1",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.1.0",
"karma-mocha-reporter": "^2.2.1",
"karma": "^3.1.4",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.2",
"karma-jasmine": "^2.0.1",
"karma-mocha-reporter": "^2.2.5",
"karma-sourcemap-loader": "^0.3.7",
"karma-typescript-preprocessor": "^0.3.1",
"karma-webpack": "^2.0.2",
"redux": "^3.6.0",
"redux-observable": "^0.16.0",
"karma-webpack": "^4.0.0-rc.5",
"redux": "^4.0.1",
"redux-observable": "^1.0.0",
"reflect-metadata": "^0.1.8",
"rimraf": "^2.5.4",
"rxjs": "^5.0.1",
"ts-loader": "^2.2.7",
"rxjs": "^6.3.3",
"ts-loader": "^5.3.2",
"tslint": "^4.1.1",
"tslint-loader": "^3.3.0",
"typescript": "^2.4.0",
"uglifyjs": "^2.4.10",
"webpack": "^2.2.1",
"zone.js": "^0.8.4"
"tslint-loader": "^3.5.4",
"typescript": "^3.2.2",
"webpack": "^4.28.3",
"zone.js": "^0.8.26"
}
}
Loading