Awesome Redux Cheat Sheet
Tags: redux, cheatsheet
Published: 2021-05-13 11:25:37


### redux-thunk
Pass "thunks" to as actions. Extremely similar to redux-promises, but has support for getState. 

```
fetchData = (url) => (dispatch, getState) => {
  dispatch({ type: 'FETCH_REQUEST' })
  fetch(url)
    .then((data) => dispatch({ type: 'FETCH_DONE', data })
    .catch((error) => dispatch({ type: 'FETCH_ERROR', error })
})

store.dispatch(fetchData('/posts'))

```

```
// That's actually shorthand for:
fetchData('/posts')(store.dispatch, store.getState)

```

```
// Optional: since fetchData returns a promise, it can be chained
// for server-side rendering
store.dispatch(fetchPosts()).then(() => {
  ReactDOMServer.renderToString(<MyApp store={store} />)
})

```

[redux-thunk](https://www.npmjs.com/package/redux-thunk)
### redux-effects
Pass side effects declaratively to keep your actions pure. 

```
{
  type: 'EFFECT_COMPOSE',
  payload: {
    type: 'FETCH'
    payload: {url: '/some/thing', method: 'GET'}
  },
  meta: {
    steps: [ [success, failure] ]
  }
}

```

[redux-effects](https://www.npmjs.com/package/redux-effects)
### redux-promises
Sorta like that, too. Works by letting you pass _thunks_ (functions) to `dispatch()`. Also has 'idle checking'.

```
fetchData = (url) => (dispatch) => {
  dispatch({ type: 'FETCH_REQUEST' })
  fetch(url)
    .then((data) => dispatch({ type: 'FETCH_DONE', data })
    .catch((error) => dispatch({ type: 'FETCH_ERROR', error })
})

store.dispatch(fetchData('/posts'))

```

```
// That's actually shorthand for:
fetchData('/posts')(store.dispatch)

```

[redux-promises](https://www.npmjs.com/package/redux-promises)
### redux-promise
Pass promises to actions. Dispatches a flux-standard-action.

```
increment = createAction('INCREMENT')  // redux-actions
increment(Promise.resolve(42))

```

[redux-promise](https://github.com/acdlite/redux-promise)
### redux-logger
Logs actions to your console.

```
// Nothing to see here

```

[redux-logger](https://github.com/evgenyrodionov/redux-logger) 

## Async
### reduce-reducers
Combines reducers (like _combineReducers()_), but without namespacing magic.

```
re = reduceReducers(
  (state, action) => state + action.number,
  (state, action) => state + action.number
)

re(10, { number: 2 })  //=> 14

```

[reduce-reducers](https://www.npmjs.com/package/reduce-reducers)
### redux-multi
Dispatch multiple actions in one action creator.

```
store.dispatch([
  { type: 'INCREMENT', payload: 2 },
  { type: 'INCREMENT', payload: 3 }
])

```

[redux-multi](https://github.com/ashaffer/redux-multi)
### flux-standard-action
A standard for flux action objects. An action may have an `error`, `payload` and `meta` and nothing else.

```
{ type: 'ADD_TODO', payload: { text: 'Work it' } }
{ type: 'ADD_TODO', payload: new Error(), error: true }

```

[flux-standard-action](https://github.com/acdlite/flux-standard-action)
### redux-actions
Create action creators in flux standard action format.

```
increment = createAction('INCREMENT', amount => amount)
increment = createAction('INCREMENT')  // same

```

```
increment(42) === { type: 'INCREMENT', payload: 42 }

```

```
// Errors are handled for you:
err = new Error()
increment(err) === { type: 'INCREMENT', payload: err, error: true }

```

[redux-actions](https://www.npmjs.com/package/redux-actions)
### Reference
* [Awesome Redux Cheat Sheet](https://cheatsheetmaker.com/awesome-redux) - [Cheat Sheet Maker](https://cheatsheetmaker.com)