awesome-redux.md

   1 ---
   2 title: Awesome Redux
   3 category: React
   4 layout: 2017/sheet
   5 updated: 2017-11-19
   6 ---
   7
   8 ### redux-actions
   9
  10 Create action creators in flux standard action format.
  11 {: .-setup}
  12
  13 ```js
  14 increment = createAction('INCREMENT', amount => amount)
  15 increment = createAction('INCREMENT')  // same
  16 ```
  17
  18 ```js
  19 increment(42) === { type: 'INCREMENT', payload: 42 }
  20 ```
  21
  22 ```js
  23 // Errors are handled for you:
  24 err = new Error()
  25 increment(err) === { type: 'INCREMENT', payload: err, error: true }
  26 ```
  27
  28 [redux-actions](https://www.npmjs.com/package/redux-actions)
  29 {: .-crosslink}
  30
  31 ### flux-standard-action
  32
  33 A standard for flux action objects. An action may have an `error`, `payload` and `meta` and nothing else.
  34 {: .-setup}
  35
  36 ```js
  37 { type: 'ADD_TODO', payload: { text: 'Work it' } }
  38 { type: 'ADD_TODO', payload: new Error(), error: true }
  39 ```
  40
  41 [flux-standard-action](https://github.com/acdlite/flux-standard-action)
  42 {: .-crosslink}
  43
  44 ### redux-multi
  45
  46 Dispatch multiple actions in one action creator.
  47 {: .-setup}
  48
  49 ```js
  50 store.dispatch([
  51   { type: 'INCREMENT', payload: 2 },
  52   { type: 'INCREMENT', payload: 3 }
  53 ])
  54 ```
  55
  56 [redux-multi](https://github.com/ashaffer/redux-multi)
  57 {: .-crosslink}
  58
  59 ### reduce-reducers
  60 Combines reducers (like *combineReducers()*), but without namespacing magic.
  61 {: .-setup}
  62
  63 ```js
  64 re = reduceReducers(
  65   (state, action) => state + action.number,
  66   (state, action) => state + action.number
  67 )
  68
  69 re(10, { number: 2 })  //=> 14
  70 ```
  71
  72 [reduce-reducers](https://www.npmjs.com/package/reduce-reducers)
  73 {: .-crosslink}
  74
  75 ### redux-logger
  76
  77 Logs actions to your console.
  78 {: .-setup}
  79
  80 ```js
  81 // Nothing to see here
  82 ```
  83
  84 [redux-logger](https://github.com/evgenyrodionov/redux-logger)
  85 {: .-crosslink}
  86
  87 Async
  88 -----
  89
  90 ### redux-promise
  91
  92 Pass promises to actions. Dispatches a flux-standard-action.
  93 {: .-setup}
  94
  95 ```js
  96 increment = createAction('INCREMENT')  // redux-actions
  97 increment(Promise.resolve(42))
  98 ```
  99
 100 [redux-promise](https://github.com/acdlite/redux-promise)
 101 {: .-crosslink}
 102
 103 ### redux-promises
 104
 105 Sorta like that, too. Works by letting you pass *thunks* (functions) to `dispatch()`. Also has 'idle checking'.
 106 {: .-setup}
 107
 108 ```js
 109 fetchData = (url) => (dispatch) => {
 110   dispatch({ type: 'FETCH_REQUEST' })
 111   fetch(url)
 112     .then((data) => dispatch({ type: 'FETCH_DONE', data })
 113     .catch((error) => dispatch({ type: 'FETCH_ERROR', error })
 114 })
 115
 116 store.dispatch(fetchData('/posts'))
 117 ```
 118
 119 ```js
 120 // That's actually shorthand for:
 121 fetchData('/posts')(store.dispatch)
 122 ```
 123
 124 [redux-promises](https://www.npmjs.com/package/redux-promises)
 125 {: .-crosslink}
 126
 127 ### redux-effects
 128
 129 Pass side effects declaratively to keep your actions pure.
 130 {: .-setup}
 131
 132 ```js
 133 {
 134   type: 'EFFECT_COMPOSE',
 135   payload: {
 136     type: 'FETCH'
 137     payload: {url: '/some/thing', method: 'GET'}
 138   },
 139   meta: {
 140     steps: [ [success, failure] ]
 141   }
 142 }
 143 ```
 144
 145 [redux-effects](https://www.npmjs.com/package/redux-effects)
 146 {: .-crosslink}
 147
 148 ### redux-thunk
 149
 150 Pass "thunks" to as actions. Extremely similar to redux-promises, but has support for getState.
 151 {: .-setup}
 152
 153 ```js
 154 fetchData = (url) => (dispatch, getState) => {
 155   dispatch({ type: 'FETCH_REQUEST' })
 156   fetch(url)
 157     .then((data) => dispatch({ type: 'FETCH_DONE', data })
 158     .catch((error) => dispatch({ type: 'FETCH_ERROR', error })
 159 })
 160
 161 store.dispatch(fetchData('/posts'))
 162 ```
 163
 164 ```js
 165 // That's actually shorthand for:
 166 fetchData('/posts')(store.dispatch, store.getState)
 167 ```
 168
 169 ```js
 170 // Optional: since fetchData returns a promise, it can be chained
 171 // for server-side rendering
 172 store.dispatch(fetchPosts()).then(() => {
 173   ReactDOMServer.renderToString(<MyApp store={store} />)
 174 })
 175 ```
 176
 177 [redux-thunk](https://www.npmjs.com/package/redux-thunk)
 178 {: .-crosslink}