Tutorial by Examples

While redux itself is entirely synchronous, you can use a middleware such as redux-thunk to handle asynchronous actions. A "thunk" is another name for a callback. It is a function that is usually passed as an argument to be called at a later time. To use, apply the middleware to you...

const loadUser = userId => dispatch => { dispatch({ type: 'USER_LOADING' }); $.ajax('/users/' + userId, { type: 'GET', dataType : 'json' }).done(response => { dispatch({ type: 'USER_LOADED', user: response }); }).fail((xhr, status, error) =>...

When you call store.dispatch(actionObject) it is handled synchronously. I.e. reducers would be called and your store listeners would be notified, your react views would be re-rendered on each dispatched action. Middleware is what enables you to delay dispatching or even dispatch different actions ...

Another approach to handling asynchrony in Redux is to use action creators. In Flux, action creators are special functions that construct action objects and dispatch them. myActionCreator(dispatch) { dispatch({ type: "ASYNC_ACTION_START" }); setTimeout(() => { dispatch({ typ...

This is example has extracted from this boilerplate. Custom middleware: export default function clientMiddleware() { return ({dispatch, getState}) => { return next => action => { if (typeof action === 'function') { return action(dispatch, getState); } ...

import 'whatwg-fetch'; function checkStatus(response) { if (response.status >= 200 && response.status < 300) { return response; } const error = new Error(response.statusText); error.response = response; throw error; } function parseJSON(response) { return ...