awesome-redux: update

This commit is contained in:
Rico Sta. Cruz 2017-08-30 21:52:08 +08:00
parent cf5dd83a59
commit 491d857d1b
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
1 changed files with 67 additions and 15 deletions

View File

@ -1,31 +1,48 @@
---
title: Awesome-redux
category: JavaScript libraries
layout: default-ad
title: Awesome Redux
category: React
layout: 2017/sheet
updated: 2017-08-30
---
### [redux-actions](https://www.npmjs.com/package/redux-actions)
### redux-actions
Create action creators in flux standard action format.
{: .-setup}
```js
increment = createAction('INCREMENT', amount => amount)
increment = createAction('INCREMENT') // same
```
err = new Error()
```js
increment(42) === { type: 'INCREMENT', payload: 42 }
```
```js
// Errors are handled for you:
err = new Error()
increment(err) === { type: 'INCREMENT', payload: err, error: true }
```
### [flux-standard-action](https://github.com/acdlite/flux-standard-action)
A standard for flux action objects. An action may have an `error`, `payload` and `meta` and nothing else.
See: [redux-actions](https://www.npmjs.com/package/redux-actions)
```
### flux-standard-ation
A standard for flux action objects. An action may have an `error`, `payload` and `meta` and nothing else.
{: .-setup}
```js
{ type: 'ADD_TODO', payload: { text: 'Work it' } }
{ type: 'ADD_TODO', payload: new Error(), error: true }
```
### [redux-multi](https://github.com/ashaffer/redux-multi)
See: [flux-standard-action](https://github.com/acdlite/flux-standard-action)
### redux-multi
Dispatch multiple actions in one action creator.
{: .-setup}
```js
store.dispatch([
@ -34,8 +51,11 @@ store.dispatch([
])
```
### [reduce-reducers](https://www.npmjs.com/package/reduce-reducers)
See: [redux-multi](https://github.com/ashaffer/redux-multi)
### reduce-reducers
Combines reducers (like *combineReducers()*), but without namespacing magic.
{: .-setup}
```js
re = reduceReducers(
@ -46,22 +66,38 @@ re = reduceReducers(
re(10, { number: 2 }) //=> 14
```
### [redux-logger](https://github.com/evgenyrodionov/redux-logger)
See: [reduce-reducers](https://www.npmjs.com/package/reduce-reducers)
### redux-logger
Logs actions to your console.
{: .-setup}
```js
// Nothing to see here
```
See: [redux-logger](https://github.com/evgenyrodionov/redux-logger)
Async
-----
### [redux-promise](https://github.com/acdlite/redux-promise)
### redux-promise
Pass promises to actions. Dispatches a flux-standard-action.
{: .-setup}
```js
increment = createAction('INCREMENT') // redux-actions
increment(Promise.resolve(42))
```
### [redux-promises](https://www.npmjs.com/package/redux-promises)
See: [redux-promise](https://github.com/acdlite/redux-promise)
### redux-promises
Sorta like that, too. Works by letting you pass *thunks* (functions) to `dispatch()`. Also has 'idle checking'.
{: .-setup}
```js
fetchData = (url) => (dispatch) => {
@ -72,13 +108,19 @@ fetchData = (url) => (dispatch) => {
})
store.dispatch(fetchData('/posts'))
```
```js
// That's actually shorthand for:
fetchData('/posts')(store.dispatch)
```
### [redux-effects](https://www.npmjs.com/package/redux-effects)
See: [redux-promises](https://www.npmjs.com/package/redux-promises)
### redux-effects
Pass side effects declaratively to keep your actions pure.
{: .-setup}
```js
{
@ -93,8 +135,12 @@ Pass side effects declaratively to keep your actions pure.
}
```
### [redux-thunk](https://www.npmjs.com/package/redux-thunk)
See: [redux-effects](https://www.npmjs.com/package/redux-effects)
### redux-thunk
Pass "thunks" to as actions. Extremely similar to redux-promises, but has support for getState.
{: .-setup}
```js
fetchData = (url) => (dispatch, getState) => {
@ -105,13 +151,19 @@ fetchData = (url) => (dispatch, getState) => {
})
store.dispatch(fetchData('/posts'))
```
```js
// That's actually shorthand for:
fetchData('/posts')(store.dispatch, store.getState)
```
```js
// Optional: since fetchData returns a promise, it can be chained
// for server-side rendering
store.dispatch(fetchPosts()).then(() => {
ReactDOMServer.renderToString(<MyApp store={store} />)
})
```
See: [redux-thunk](https://www.npmjs.com/package/redux-thunk)