You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+37-43Lines changed: 37 additions & 43 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,9 +12,7 @@ npm i -S redux-axios-middleware
12
12
13
13
### Use middleware
14
14
15
-
By default you only need to import middleware from package and add it to redux middlewares
16
-
and execute it with first argument being with axios instance. second optional argument are middleware
17
-
options for customizing
15
+
By default you only need to import middleware from package and add it to redux middlewares and execute it with first argument being with axios instance. second optional argument are middleware options for customizing
@@ -62,7 +59,7 @@ export function loadCategories() {
62
59
```
63
60
64
61
- use `action.types` with array of types `[REQUEST,SUCCESS,FAILURE]`
65
-
`REQUEST` will be dispatched on start, then `SUCCESS` or `FAILURE` after request result
62
+
-`REQUEST` will be dispatched on start, then `SUCCESS` or `FAILURE` after request result
66
63
67
64
```javascript
68
65
exportfunctionloadCategories() {
@@ -110,7 +107,7 @@ Promise.all([
110
107
111
108
### Request complete
112
109
113
-
After request complete, middleware will dispatch new action,
110
+
After request complete, middleware will dispatch new action,
114
111
115
112
#### on success
116
113
@@ -131,7 +128,7 @@ Error action is same as success action with one difference, there's no key `payl
131
128
```js
132
129
{
133
130
type:'OH_NO',
134
-
error: { ... }, //axios error response object with data status headers etc.
131
+
error: { ... }, //axios error object with message, code, config and response fields
135
132
meta: {
136
133
previousAction: { ... } //action which triggered request
137
134
}
@@ -143,10 +140,10 @@ Error action is same as success action with one difference, there's no key `payl
143
140
```js
144
141
{
145
142
type:'OH_NO',
146
-
error: {
143
+
error: {
147
144
status:0,
148
145
...//rest of axios error response object
149
-
},
146
+
},
150
147
meta: {
151
148
previousAction: { ... } //action which triggered request
152
149
}
@@ -155,8 +152,7 @@ Error action is same as success action with one difference, there's no key `payl
155
152
156
153
### Multiple clients
157
154
158
-
If you are using more than one different APIs, you can define those clients and put them to middleware. All you have to change is import
159
-
of middleware, which is passed to redux createStore function and defined those clients.
155
+
If you are using more than one different APIs, you can define those clients and put them to middleware. All you have to change is import of middleware, which is passed to redux createStore function and defined those clients.
160
156
161
157
```
162
158
import { multiClientMiddleware } from 'redux-axios-middleware';
@@ -169,26 +165,29 @@ createStore(
169
165
)
170
166
```
171
167
172
-
`clients` object should be map of
168
+
`clients` object should be map of
169
+
173
170
```
174
-
{
171
+
{
175
172
client: axiosInstance, // instance of axios client created by axios.create(...)
176
173
options: {} //optional key for passing specific client options
177
174
}
178
175
```
176
+
179
177
For example:
178
+
180
179
```
181
180
{
182
181
default: {
183
182
client: axios.create({
184
183
baseURL:'http://localhost:8080/api',
185
-
responseType: 'json'
184
+
responseType: 'json'
186
185
})
187
186
},
188
187
googleMaps: {
189
188
client: axios.create({
190
189
baseURL:'https://maps.googleapis.com/maps/api',
191
-
responseType: 'json'
190
+
responseType: 'json'
192
191
})
193
192
}
194
193
}
@@ -209,45 +208,40 @@ export function loadCategories() {
209
208
}
210
209
}
211
210
```
212
-
If you don't define client, default value will be used. You can change default client name in middleware options.
213
-
214
211
212
+
If you don't define client, default value will be used. You can change default client name in middleware options.
215
213
216
214
### Middleware options
217
215
218
216
Options can be changed on multiple levels. They are merged in following direction:
All values except interceptors are overriden, interceptors are merged in same order.
223
-
Some values are changeable only on certain level (can be seen in change level column).
224
221
225
-
Legend:
226
-
`M` - middleware config
227
-
`C` - client config
228
-
`A` - action config
222
+
All values except interceptors are overriden, interceptors are merged in same order. Some values are changeable only on certain level (can be seen in change level column).
|successSuffix | string | SUCCESS |`M``C``A`|default suffix added to success action, for example `{type:"READ"}` will be `{type:"READ_SUCCESS"}`|
234
-
|errorSuffix | string | FAIL |`M``C``A`| same as above|
235
-
|onSuccess | function | described above |`M``C``A`| function called if axios resolve with success|
236
-
|onError | function | described above |`M``C``A`| function called if axios resolve with error|
237
-
|onComplete | function | described above |`M``C``A`| function called after axios resolve|
238
-
|returnRejectedPromiseOnError | bool | false|`M``C``A`| if `true`, axios onError handler will return `Promise.reject(newAction)` instead of `newAction`|
239
-
|isAxiosRequest | function | function check if action contain `action.payload.request`|`M`| check if action is axios request, this is connected to `getRequestConfig`|
240
-
|getRequestConfig | function | return content of `action.payload.request`|`M``C``A`| if `isAxiosRequest` returns true, this function get axios request config from action|
241
-
|getClientName | function | returns `action.payload.client` OR `'default'`|`M``C``A`| attempts to resolve used client name or use defaultClientName|
242
-
|defaultClientName | every possible object key type |`'default'`|`M`| key which define client used if `getClienName` returned false value|
243
-
|getRequestOptions | function | return `action.payload.options`|`M``C`| returns options object from action to override some values|
244
-
|interceptors | object `{request: [], response: []}`||`M``C`| You can pass axios request and response interceptors. Take care, first argument of interceptor is different from default axios interceptor, first received argument is object with `getState`, `dispatch` and `action` keys|
226
+
key | type | default value | change level | description
successSuffix | string | SUCCESS | `M``C``A` | default suffix added to success action, for example `{type:"READ"}` will be `{type:"READ_SUCCESS"}`
229
+
errorSuffix | string | FAIL | `M``C``A`| same as above
230
+
onSuccess | function | described above | `M``C``A`| function called if axios resolve with success
231
+
onError | function | described above | `M``C``A`| function called if axios resolve with error
232
+
onComplete | function | described above | `M``C``A`| function called after axios resolve
233
+
returnRejectedPromiseOnError | bool | false| `M``C``A`| if `true`, axios onError handler will return `Promise.reject(newAction)` instead of `newAction`
234
+
isAxiosRequest | function | function check if action contain `action.payload.request` | `M`| check if action is axios request, this is connected to `getRequestConfig`
235
+
getRequestConfig | function | return content of `action.payload.request`| `M``C``A`| if `isAxiosRequest` returns true, this function get axios request config from action
236
+
getClientName | function | returns `action.payload.client` OR `'default'`| `M``C``A`| attempts to resolve used client name or use defaultClientName
237
+
defaultClientName | every possible object key type | `'default'`| `M`| key which define client used if `getClienName` returned false value
238
+
getRequestOptions | function | return `action.payload.options`| `M``C`| returns options object from action to override some values
239
+
interceptors | object `{request: [], response: []}` | | `M``C`| You can pass axios request and response interceptors. Take care, first argument of interceptor is different from default axios interceptor, first received argument is object with `getState`, `dispatch` and `action` keys
245
240
246
241
## License
247
242
248
243
This project is licensed under the MIT license, Copyright (c) 2016 Michal Svrček. For more information see `LICENSE.md`.
249
244
250
245
## Acknowledgements
251
246
252
-
[Dan Abramov](https://github.com/gaearon) for Redux
253
-
[Matt Zabriskie](https://github.com/mzabriskie) for [Axios](https://github.com/mzabriskie/axios). A Promise based HTTP client for the browser and node.js
247
+
[Dan Abramov](https://github.com/gaearon) for Redux [Matt Zabriskie](https://github.com/mzabriskie) for [Axios](https://github.com/mzabriskie/axios). A Promise based HTTP client for the browser and node.js
0 commit comments