Skip to content

Commit 9b5a9fc

Browse files
Evan Schultzsmithad15
Evan Schultz
authored andcommitted
Revert "Example of Actions and Angular 2 Dependency Injection" (angular-redux#56)
1 parent 54a8a56 commit 9b5a9fc

File tree

1 file changed

+0
-82
lines changed

1 file changed

+0
-82
lines changed

packages/store/README.md

Lines changed: 0 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -115,88 +115,6 @@ ngRedux.subscribe(() => {
115115

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

118-
## Using Angular Services in your Action Creators
119-
120-
In order to use services in your action creators, you need to integrate
121-
them into Angular 2's dependency injector.
122-
123-
This means attaching your action creators to a class so that:
124-
1. you can make it `@Injectable()`, and
125-
2. you can inject other services into its constructor for your
126-
action creators to use.
127-
128-
Take a look at this example, which uses
129-
* [redux-thunk](https://github.com/gaearon/redux-thunk) to
130-
allow for asynchronous actions, and
131-
* Angular 2's `http` service to make auth requests.
132-
133-
```typescript
134-
import { Injectable } from 'angular2/core';
135-
import { Http } from 'angular2/http';
136-
137-
import {
138-
LOGIN_USER_PENDING,
139-
LOGIN_USER_SUCCESS,
140-
LOGIN_USER_ERROR,
141-
LOGOUT_USER
142-
} from '../constants';
143-
144-
// Wrap our action creators in a class and make it @Injectable.
145-
// Don't forget to add it to your app's `providers`.
146-
@Injectable()
147-
export class SessionActions {
148-
constructor(private http: Http) {}
149-
150-
// Here's an action creator that uses HTTP.
151-
loginUser(credentials) {
152-
return (dispatch, getState) => {
153-
dispatch(LOGIN_USER_PENDING);
154-
155-
this.http.post('/auth/login', credentials)
156-
.toPromise()
157-
.then(response => dispatch(LOGIN_USER_SUCCESS, response.json())
158-
.catch(error => dispatch(LOGIN_USER_ERROR, error);
159-
});
160-
};
161-
}
162-
163-
// Just a regular, synchronous action creator.
164-
logoutUser() {
165-
return { type: LOGOUT_USER };
166-
}
167-
}
168-
```
169-
170-
To use these action creators, we can just go ahead an map them
171-
to our container component:
172-
173-
```typescript
174-
import { Component } from 'angular2/core';
175-
import { NgRedux } from 'ng2-redux';
176-
import { SessionActions } from '../actions/session';
177-
import { IAppState } from './app-state';
178-
179-
@Component({
180-
// ... etc.
181-
})
182-
export class LoginPage {
183-
// Here we inject the SessionActions instance into our
184-
// smart component.
185-
constructor(
186-
private ngRedux: NgRedux<IAppState>,
187-
private sessionActions: SessionActions) {
188-
189-
ngRedux.mapDispatchToTarget((dispatch) => {
190-
return {
191-
login: (credentials) => dispatch(
192-
this.sessionActions.loginUser(credentials)),
193-
logout: () => dispatch(
194-
this.sessionActions.logoutUser())
195-
};
196-
})(this);
197-
}
198-
};
199-
```
200118

201119
## Using DevTools
202120

0 commit comments

Comments
 (0)