@@ -115,88 +115,6 @@ ngRedux.subscribe(() => {
115
115
116
116
This means that you are free to use Redux basic API in advanced cases where ` connect ` 's API would not fill your needs.
117
117
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
- ` ` `
200
118
201
119
## Using DevTools
202
120
0 commit comments