1.0.0 • Published 9 years ago
redux-promised-thunk v1.0.0
redux-promised-thunk
Thunk middleware which is support functions and Promises for Redux. Originally based on redux-thunk(middleware.
npm install --save redux-promised-thunk
What's a thunk?!
A thunk is a function that wraps an expression to delay its evaluation.
// calculation of 1 + 2 is immediate
// x === 3
let x = 1 + 2;
// calculation of 1 + 2 is delayed
// foo can be called later to perform the calculation
// foo is a thunk!
let foo = () => 1 + 2;
Usage
redux-promised-thunk
middleware allows you to write action creators that return a thunk 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 thunk receives the store methods dispatch
and getState()
as parameters.
An action creator that returns a thunk to perform asynchronous dispatch:
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
function increment() {
return {
type: INCREMENT_COUNTER
};
}
function incrementAsync() {
return dispatch => {
setTimeout(() => {
// Yay! Can invoke sync or async actions with `dispatch`
dispatch(increment());
}, 1000);
};
}
An action creator that returns a thunk to perform conditional dispatch:
function incrementIfOdd() {
return (dispatch, getState) => {
const { counter } = getState();
if (counter % 2 === 0) {
return;
}
dispatch(increment());
};
}
But you can also return async functions:
function incrementIfOdd() {
return async (dispatch, getState) => {
const { counter } = getState();
const result = await shouldIncrement(counter);
if (!result)
return;
}
dispatch(increment());
};
}
To enable redux-promised-thunk use applyMiddleware()
:
import { createStore, applyMiddleware, combineReducers } from 'redux';
import PromisedThunk from 'redux-promised-thunk';
import * as reducers from './reducers/index';
const reducer = combineReducers(reducers);
// create a store that has redux-thunk middleware enabled
const actionPromises = [];
const createStoreWithMiddleware = applyMiddleware(
PromisedThunk((promisedAction, action, store) => {
actionPromises.push(promisedAction);
}
)(createStore);
const store = createStoreWithMiddleware(reducer);
License
MIT
1.0.0
9 years ago