Skip to content

Commit 33ea991

Browse files
e-schultzsmithad15
authored andcommitted
feat(*): Typescript Port (angular-redux#33)
* Adds .idea (intellij IDE) to .gitignore * Ports the library to TypeScript, and adds (basic) generic support * Examples now work with Typed Stores, and Angular 2 Beta 1 * Upgraded tsd to typings * Updates/prunes dependencies adds postinstall for typings to the example * Purge typings * Fixes typings postinstall when used as a dependency * Updates typings and excludes tmp from tsconfig * Fix reflect-metadata issue * Fix counter and dev tools * Remove lib folder * Update counter to load ng2-redux from src * Update webpack config * Ports the library to TypeScript, and adds (basic) generic support * Update peer dependencies * Lock down versions * Adds redux-logger typings/dependency * Tests are now TypeScript * Remove old service code from provider.ts * Left ng-redux.ts as own file * Fix exports from src/index.ts * Remove extra 'reflect-metadata' from counter example * chore(tests) Add typings for mocha and chai * add chai to dev dep * update node version for tests * Observable Store and official redux typings * Remove js version of connector spec * Add ability to provide a custom compare function to .select * Fix path to index.d.ts * Update contributors on package.json * Cleanup example * Update readme with .select details * Change provider to use NgRedux class directly * Add alias for @Inject('ngRedux') To prevent breaking changes from people using @Inject('ngRedux'), setup an alias so that code using this style of injection will still work. * refactor(connector) Merge ng-redux and connector Refactored connector so all of the ng-redux.ts functionality was moved into it, then renamed it. * Updated tests, and cleaned up the provide factory. * Fix type issue for action creator * chore(readme) Update bootstrap * No longer need to register NgRedux directly as a provider * docs(ngRedux): Add docs to public api methods (angular-redux#35) * chore(package): Update repo details (angular-redux#36) * chore(ci): Setup circleci (angular-redux#37) * chore(ci): Setup circleci * chore(ci): Change badge to be circleci (angular-redux#38) * Chore ci changes (angular-redux#39) * chore(ci): remove .travis.yml * chore(ci): Change node version * Chore/example project cleanup (angular-redux#52) * chore(example): use npm package instead of source. * Prefer the chrome extension dev tools in README (angular-redux#50) This is because they don't require a dependency on React. Also showed an example of enabling Angular 2 to refresh after events fired by the dev tools. * Dependency cleanup, minor corrections to example devtools. (angular-redux#55) * Core changelog (angular-redux#53) * add changelog
1 parent 9b5a9fc commit 33ea991

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1021
-2436
lines changed

packages/store/.babelrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"stage": 0,
33
"loose": "all"
4-
}
4+
}

packages/store/.gitignore

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
node_modules/
2-
lib/
32
*.tgz
43
examples/counter/dist/components/*
54
examples/counter/dist/containers/*
6-
examples/counter/dist/index.*
5+
examples/counter/dist/index.*
6+
.idea
7+
npm-debug.log
8+
examples/counter/typings/
9+
src/typings/
10+
typings/
11+
tmp/
12+
lib/

packages/store/.npmignore

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
src
22
test
3-
examples
3+
examples
4+
.travis.yml
5+
.gitignore
6+
.babelrc
7+
lib/___tests___

packages/store/.travis.yml

-3
This file was deleted.

packages/store/CHANGELOG.md

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# 2.2.2
2+
3+
### Features
4+
5+
* **type definitions**:
6+
* Ported to typescript
7+
* Supports typed stores / reducers
8+
* Uses offical Redux type definitions
9+
* **Type Injectable**:
10+
* Able to inject `NgRedux` into your component by type, and not need `@Inject('ngRedux')`
11+
* `@Inject('ngRedux')` still works
12+
13+
```ts
14+
import { NgRedux } from 'ng2-redux';
15+
// ...
16+
export class MyComponent {
17+
constructor(private ngRedux: NgRedux) {
18+
}
19+
}
20+
```
21+
* **State as Observable**: Ability to expose parts of your state as an observable.
22+
23+
```ts
24+
select<S>(selector: string | number | symbol | ((state: RootState) => S), comparer?: (x: any, y: any) => boolean): Observable<S>;
25+
wrapActionCreators: (actions: any) => (dispatch: Redux.Dispatch<any>) => Redux.ActionCreator<{}> | Redux.ActionCreatorsMapObject;
26+
```
27+
28+
Example use:
29+
30+
```js
31+
import { NgRedux } from 'ng2-redux';
32+
// ...
33+
export class MyComponent implements OnInit {
34+
countByKey$: Observable<number>;
35+
countByFunc$: Observable<number>;
36+
constructor(private ngRedux: NgRedux) {
37+
}
38+
ngOnInit() {
39+
this.countByKey$ = this.ngRedux.select('count');
40+
this.countByFunc$ = this.ngRedux.select(state=>state.count);
41+
}
42+
}
43+
```
44+
45+
Also have the ability to provide a custom compare function.
46+
47+
```js
48+
import { is, Map } from 'immutable';
49+
import { NgRedux } from 'ng2-redux';
50+
51+
// ...
52+
export class MyComponent implements OnInit {
53+
person$: Observable<Map<string,any>>;
54+
constructor(private ngRedux: ngRedux) { }
55+
ngOnInit() {
56+
// even if the reference of the object has changed,
57+
// if the data is the same - it wont be treated as a change
58+
this.person$ = this.ngRedux.select(state=>state.people.get(0),is);
59+
}
60+
}
61+
```

packages/store/README.md

+112-7
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
For Angular 1 see [ng-redux](https://github.com/wbuchwalter/ng-redux)
55

6-
[![build status](https://img.shields.io/travis/wbuchwalter/ng2-redux/master.svg?style=flat-square)](https://travis-ci.org/wbuchwalter/ng2-redux)
6+
[![Circle CI](https://circleci.com/gh/angular-redux/ng2-redux/tree/master.svg?style=svg)](https://circleci.com/gh/angular-redux/ng2-redux/tree/master)
77
[![npm version](https://img.shields.io/npm/v/ng2-redux.svg?style=flat-square)](https://www.npmjs.com/package/ng2-redux)
88

99
ngRedux lets you easily connect your angular components with Redux.
@@ -24,7 +24,7 @@ npm install --save ng2-redux
2424

2525
## Quick Start
2626

27-
#### Initialization
27+
### Initialization
2828

2929
```JS
3030
import {bootstrap} from 'angular2/platform/browser';
@@ -45,11 +45,41 @@ bootstrap(
4545

4646
#### Usage
4747

48+
`ng2-redux` has two ways that it can be used. The first way is using the `ngRedux.connect` API, which will map the state and dispatch actions to the provided target.
49+
50+
There is also `ngRedux.select`, which will expose a slice of your state as an RxJs observable.
51+
52+
53+
#### ngRedux.select
54+
```JS
55+
import * as CounterActions from '../actions/CounterActions';
56+
import {NgRedux} from 'ng2-redux';
57+
import {Observable} from 'rxjs';
58+
59+
class CounterApp {
60+
count$: Observable<number>;
61+
counterSubscription: Function;
62+
63+
constructor(private ngRedux: NgRedux) { }
64+
65+
ngOnInit() {
66+
this.count$ = this.ngRedux
67+
.select(n=>n.counter)
68+
this.ngRedux.mapDispatchToTarget(CounterActions)
69+
70+
}
71+
72+
}
73+
```
74+
75+
#### ngRedux.connect
76+
4877
```JS
4978
import * as CounterActions from '../actions/CounterActions';
79+
import {NgRedux} from 'ng2-redux';
5080

5181
class CounterApp {
52-
constructor( @Inject('ngRedux') ngRedux) {
82+
constructor(ngRedux: NgRedux) {
5383
this.unsubscribe = ngRedux.connect(this.mapStateToThis, this.mapDispatchToThis)(this);
5484
}
5585

@@ -71,6 +101,7 @@ class CounterApp {
71101
}
72102
```
73103

104+
74105
## API
75106

76107
### `provider(store)`
@@ -98,11 +129,35 @@ connect(this.mapStateToThis, this.mapDispatchToThis)(this);
98129
connect(this.mapState, this.mapDispatch)((selectedState, actions) => {/* ... */});
99130
```
100131

101-
102132
#### Remarks
103133
* The `mapStateToTarget` function takes a single argument of the entire Redux store’s state and returns an object to be passed as props. It is often called a selector. Use reselect to efficiently compose selectors and compute derived data.
104134

105135

136+
### select(key | function,[comparer]) => Observable
137+
138+
Exposes a slice of state as an observable. Accepts either a key-path, or a selector function.
139+
140+
If using the async pipe, you do not need to subscribe to it explicitly, but can use the angular Async pipe to observe for values.
141+
142+
#### Arguments
143+
144+
* `key` \(*string*): A key within the state that you want to subscribe to.
145+
* `selector` \(*Function*): A function that accepts the application state, and returns the slice you want subscribe to for changes.
146+
147+
148+
e.g:
149+
```JS
150+
this.counter$ = this.ngRedux.select(state=>state.counter);
151+
// or
152+
this.counterSubscription = this.ngRedux
153+
.select(state=>state.counter)
154+
.subscribe(count=>this.counter = count);
155+
// or
156+
157+
this.counter$ = this.ngRedux.select('counter');
158+
```
159+
160+
106161
### Store API
107162
All of redux's store methods (i.e. `dispatch`, `subscribe` and `getState`) are exposed by $ngRedux and can be accessed directly. For example:
108163

@@ -115,9 +170,59 @@ ngRedux.subscribe(() => {
115170

116171
This means that you are free to use Redux basic API in advanced cases where `connect`'s API would not fill your needs.
117172

118-
119173
## Using DevTools
120174

121-
In order to use Redux DevTools with your angular app, you need to install [react](https://www.npmjs.com/package/react), [react-redux](https://www.npmjs.com/package/react-redux) and [redux-devtools](https://www.npmjs.com/package/redux-devtools) as development dependencies.
175+
Ng2Redux is fully compatible with the Chrome extension version of the Redux dev tools:
176+
177+
https://github.com/zalmoxisus/redux-devtools-extension
178+
179+
Here's how to enable them in your app (you probably only want to do
180+
this in development mode):
122181

123-
You can find a sample devtools implentation in the [counter example](https://github.com/wbuchwalter/ng2-redux/blob/master/examples/counter/devTools.js)
182+
1. Add the extension to your storeEnhancers:
183+
184+
```typescript
185+
const enhancers = [];
186+
187+
// Add Whatever other enhancers you want.
188+
189+
if (__DEVMODE__ && window.devToolsExtension) {
190+
enhancers = [ ...enhancers, window.devToolsExtension() ];
191+
}
192+
193+
const store = compose(
194+
applyMiddleware(middleware),
195+
...enhancers
196+
)(createStore)(rootReducer, initialState);
197+
```
198+
199+
2. Make Angular 2 update when store events come from the dev tools
200+
instead of Ng2Redux:
201+
202+
```typescript
203+
@Component({
204+
// etc.
205+
})
206+
export class App {
207+
private unsubscribe: () => void;
208+
209+
constructor(
210+
private ngRedux: NgRedux<IAppState>,
211+
applicationRef: ApplicationRef) {
212+
213+
// etc.
214+
215+
if (__DEVMODE__) {
216+
this.unsubscribe = ngRedux.subscribe(() => {
217+
applicationRef.tick();
218+
});
219+
}
220+
}
221+
222+
ngOnDestroy() {
223+
if (this.unsubscribe) {
224+
this.unsubscribe();
225+
}
226+
}
227+
};
228+
```

packages/store/circle.yml

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
machine:
2+
node:
3+
version: 4.4.3

packages/store/examples/counter/actions/CounterActions.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
export const INCREMENT_COUNTER:string = 'INCREMENT_COUNTER';
22
export const DECREMENT_COUNTER:string = 'DECREMENT_COUNTER';
3+
import * as Redux from 'redux';
4+
35

46
export var increment = () => {
5-
return {
7+
return <Redux.Action>{
68
type: INCREMENT_COUNTER
79
};
810
}
911

1012
export var decrement = () => {
11-
return {
13+
return <Redux.Action>{
1214
type: DECREMENT_COUNTER
1315
};
1416
}
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
1-
import {Component} from 'angular2/core';
1+
import {Component, Input} from 'angular2/core';
22

33
@Component({
44
selector: 'counter',
5-
inputs: [
6-
'counter',
7-
'increment',
8-
'decrement',
9-
'incrementIfOdd',
10-
'incrementAsync'
11-
],
125
template: `
136
<p>
147
Clicked: {{ counter }} times
@@ -19,4 +12,11 @@ import {Component} from 'angular2/core';
1912
</p>
2013
`
2114
})
22-
export class Counter {}
15+
export class Counter {
16+
@Input() counter: number;
17+
@Input() increment: () => void;
18+
@Input() decrement: () => void;
19+
@Input() incrementIfOdd: () => void;
20+
@Input() incrementAsync: () => void;
21+
22+
}

0 commit comments

Comments
 (0)