DEV Community

Lam
Lam

Posted on

2

Awesome Redux Cheat Sheet

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'))

Enter fullscreen mode Exit fullscreen mode
// That's actually shorthand for:
fetchData('/posts')(store.dispatch, store.getState)

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

Enter fullscreen mode Exit fullscreen mode

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] ]
  }
}

Enter fullscreen mode Exit fullscreen mode

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'))

Enter fullscreen mode Exit fullscreen mode
// That's actually shorthand for:
fetchData('/posts')(store.dispatch)

Enter fullscreen mode Exit fullscreen mode

redux-promises

redux-promise

Pass promises to actions. Dispatches a flux-standard-action.

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

Enter fullscreen mode Exit fullscreen mode

redux-promise

redux-logger

Logs actions to your console.

// Nothing to see here

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

reduce-reducers

redux-multi

Dispatch multiple actions in one action creator.

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

Enter fullscreen mode Exit fullscreen mode

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 }

Enter fullscreen mode Exit fullscreen mode

flux-standard-action

redux-actions

Create action creators in flux standard action format.

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

Enter fullscreen mode Exit fullscreen mode
increment(42) === { type: 'INCREMENT', payload: 42 }

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

Enter fullscreen mode Exit fullscreen mode

redux-actions

Reference

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more