redux-catch-promise
Async thunk middleware for Redux. Write your async actions in a few lines.
Extremely useful for server-side rendering React components with asynchronous loaded state. See example below.
What’s a thunk?!
A thunk is a function that wraps an expression to delay its evaluation.
// calculation of 1 + 2 is immediate// x === 3let x = 1 + 2; // calculation of 1 + 2 is delayed// foo can be called later to perform the calculation// foo is a thunk!let 1 + 2;
Motivation
redux-catch-promise
middleware allows you to write action creators that returns sync or async functions instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState() as parameters.
An action creator that returns an async functions to perform asynchronous dispatch:
const SHOW_USER_LOCATION = 'SHOW_USER_LOCATION'; { return type: SHOW_USER_LOCATION location ;} { return { const finalURL = 'https://api.github.com/users/' + userName; const response = await ; const data = await response; ; };}
Installation
redux-thunk
to redux-catch-promise
Upgrade If you use redux-thunk
to enable async actions in a way above you have to replace redux-thunk
to redux-catch-promise
.
Just do it in 3 steps:
npm install redux-catch-promise --save
- Replace import declaration:
;
to
;
- Replace middleware assignment, i.e:
const createStoreWithMiddleware = createStore;
to
const actionPromises = ;const catchPromise = ;const createStoreWithMiddleware = createStore;
Clean install
npm install redux-catch-promise --save
- Add import declaration:
;
- Add middleware assignment, i.e:
const actionPromises = ;const catchPromise = ;const createStoreWithMiddleware = createStore;
Server-side Rendering with async state
;;; const reducer = ; // create a store that has redux-thunk middleware enabledconst actionPromises = ;const createStoreWithMiddleware =
Server-side rendering with async state
It's a short demo how to implement with this middleware server-side rendering of your React components with async-loading state:
server.js
const React from 'react';const Application from './application';const koa = ;const app = ; app;
client.js
;;; const state = window_sharedData && window_sharedData'state' || {};const rootElement = document; React;
application.js
;;;;;; static propTypes = state: PropTypesobject serverSideRendering: PropTypesobject ; { superprops context; const serverSideRendering = props; const catchPromise = ; const createStoreWithMiddleware = createStore; const allReducers = ; const store = ; if typeof serverSideRendering === 'object' // callback to dispatch passed actions this actions; } { return <Provider store=thisstatestore> thisrenderChild </Provider> ; } { return <ReposList prepare=thisprepare /> ; }
repos-list/index.js
;;; { return reposList: statereposList ;} { superprops context; thisprepareActions = reposListActions ; if typeof propsprepare === 'function' props; } { const reposList = thisprops; return <ul> Array ? reposListitems : <li>Empty</li> </ul> ; } { if thisprepareDataActions const props = thisprops; thisprepareDataActions; }
repos-list/action-types.js
UPDATE: 'REPOS_LIST_UPDATE';
repos-list/actions.js
; { return async { try const data = await ; const items = await data; catcherr console; ; }}
repos-list/reducer.js
; const initialState = items: {}; { }
Thanks
- redux-thunk for inspiration
License
MIT