Skip to content

Commit

Permalink
Merge pull request #21 from jamesbs/upgrade
Browse files Browse the repository at this point in the history
Update to latest versions of redux, redux-observable, rxjs
  • Loading branch information
e-schultz authored Jan 8, 2019
2 parents 192d447 + 8990dde commit 2302dd8
Show file tree
Hide file tree
Showing 17 changed files with 3,135 additions and 1,988 deletions.
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

0 comments on commit 2302dd8

Please sign in to comment.