@@ -115,88 +115,6 @@ ngRedux.subscribe(() => {
115115
116116This 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