redux-thunk | steal-like-a-dev
Minimalist implementation of redux-thunk. Primarily for teaching purposes in my StealLikeADev.com tutorial series, BUT since it's actually very usable, I decided to publish it as a package on NPM as well.
These docs are "stolen" from the original library, but I kept only the parts I've implemented, which in this case is pretty much anything. Happy stealing!
Installation & usage
$ npm install @steal-like-a-dev/redux-thunk
import { createStore, applyMiddleware } from "redux";
import thunk from "@steal-like-a-dev/redux-thunk";
import rootReducer from "./reducers/index";
const INCREMENT_COUNTER = "INCREMENT_COUNTER";
let store = createStore(rootReducer, applyMiddleware(thunk));
store.dispatch(incrementAsync());
function increment() {
return {
type: INCREMENT_COUNTER
};
}
function incrementAsync() {
return dispatch => {
setTimeout(() => {
// Yay! Can invoke sync or async actions with `dispatch`
dispatch(increment());
}, 1000);
};
}
API
Composition
Any return value from the inner function will be available as the return value of dispatch itself. This is convenient for orchestrating an asynchronous control flow with thunk action creators dispatching each other and returning Promises to wait for each other’s completion:
For more details on Composition check the official docs.
Injecting a Custom Argument
Redux Thunk supports injecting a custom argument using the withExtraArgument
function:
const store = createStore(
reducer,
applyMiddleware(thunk.withExtraArgument(api))
);
// later
function fetchUser(id) {
return (dispatch, getState, api) => {
// you can use api here
};
}
Test project
As you can see, there's also a test project included in this repo. You can run it with
npm run test:dev
or
npm run test:prod
Made for learning/teaching purposes by Pava