Registry /
web-framework / typescript-fsa-redux-thunk
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
asyncFactory
✓ import { asyncFactory } from 'typescript-fsa-redux-thunk';
✗ const asyncFactory = require('typescript-fsa-redux-thunk').asyncFactory;
`asyncFactory` is the primary export for creating asynchronous Redux Thunk actions using `typescript-fsa` patterns.
thunkToAction
✓ import { thunkToAction } from 'typescript-fsa-redux-thunk';
✗ const thunkToAction = require('typescript-fsa-redux-thunk').thunkToAction;
`thunkToAction` is a utility for casting ThunkActionCreators, often used with `bindActionCreators`.
create
✓ import actionCreatorFactory from 'typescript-fsa';
✗ import { create } from 'typescript-fsa';
While `typescript-fsa-redux-thunk` is a companion, the base `actionCreatorFactory` comes from `typescript-fsa` itself and is a default import.
This example demonstrates how to create a type-safe asynchronous login action using `asyncFactory`, set up a Redux store with `redux-thunk`, and handle the action's lifecycle (started, failed, done) in a reducer.
import 'isomorphic-fetch'; // For Node.js environments
import { createStore, applyMiddleware, AnyAction } from 'redux';
import thunkMiddleware, { ThunkMiddleware } from 'redux-thunk';
import { reducerWithInitialState } from 'typescript-fsa-reducers';
import actionCreatorFactory from 'typescript-fsa';
import { asyncFactory } from 'typescript-fsa-redux-thunk';
interface LoginParams {
email: string;
password: string;
}
interface UserToken {
token: string;
}
class CustomError extends Error {}
interface State {
title: string;
userToken: UserToken;
loggingIn?: boolean;
error?: CustomError;
}
const create = actionCreatorFactory('examples');
const createAsync = asyncFactory<State>(create);
const changeTitle = create<string>('Change the title');
const login = createAsync<LoginParams, UserToken, CustomError>(
'Login',
async (params, dispatch) => {
const url = `https://reqres.in/api/login`;
const options: RequestInit = {
method: 'POST',
body: JSON.stringify(params),
headers: {
'Content-Type': 'application/json; charset=utf-8',
},
};
const res = await fetch(url, options);
if (!res.ok) {
throw new CustomError(`Error ${res.status}: ${res.statusText}`);
}
dispatch(changeTitle('You are logged-in'));
return res.json();
},
);
const initial: State = {
title: 'Please login',
userToken: {
token: '',
},
};
const reducer = reducerWithInitialState(initial)
.case(changeTitle, (state, title) => ({
...state,
title,
}))
.case(login.async.started, (state) => ({
...state,
loggingIn: true,
error: undefined,
}))
.case(login.async.failed, (state, { error }) => ({
...state,
loggingIn: false,
error,
}))
.case(login.async.done, (state, { result: userToken }) => ({
...state,
userToken,
loggingIn: false,
error: undefined,
}));
(async () => {
const thunk: ThunkMiddleware<State, AnyAction> = thunkMiddleware;
const store = createStore(reducer, applyMiddleware(thunk));
console.log('Initial state:', store.getState().title);
try {
await store.dispatch(login({ email: 'eve.holt@reqres.in', password: 'cityslicka' }));
const { title, userToken } = store.getState();
console.log('Logged in state:', title, userToken);
} catch (err) {
console.error('Login failed:', err);
}
})();
Debug
Known issues
breakingVersion 2.x introduces breaking changes from 1.x, particularly around the assumption of the result type for async actions. The API has been simplified, and the result type is no longer always assumed to be a Promise.fixReview the official documentation for 2.x to adapt `asyncFactory` usage and return types. Explicitly return a Promise from your worker function if a promise result is desired.
affects: >=2.0.0
gotcha`redux-thunk` middleware must be correctly applied to your Redux store for `typescript-fsa-redux-thunk`'s async actions to function. Dispatching a thunk without the middleware will lead to type errors or runtime issues.fixEnsure `applyMiddleware(thunkMiddleware)` is used when creating your Redux store, and that `thunkMiddleware` is correctly typed as `ThunkMiddleware<State, AnyAction>`.
affects: >=1.0.0
gotchaProperly typing the `dispatch` function within Redux thunks, especially when dispatching other thunks or specific actions, requires careful configuration using `ThunkMiddleware` or explicitly defining `AppDispatch`.fixWhen creating the store, explicitly define `ThunkMiddleware<State, AnyAction>`. For components, consider creating a custom typed `useAppDispatch` hook if using React-Redux, following Redux Toolkit's recommendations.
affects: >=1.0.0
gotchaThis library relies on `typescript-fsa` for action creator factories. Ensure you are using `typescript-fsa` version 3.x or newer, as specified in peer dependencies, to avoid type conflicts or unexpected behavior.fixVerify that `typescript-fsa` is installed at version `3.x` or higher (`npm install typescript-fsa@^3`).
affects: >=1.0.0
deprecatedRedux-Thunk itself has undergone changes, particularly in Redux Thunk 3.0 (released with Redux 5.0 and RTK 2.0), where the default export was removed in favor of named exports `thunk` and `withExtraArgument`. While `typescript-fsa-redux-thunk` might abstract this, be aware if directly interacting with `redux-thunk`'s exports.fixIf manually importing `redux-thunk` directly, use `import { thunk } from 'redux-thunk';` instead of the default import. Redux Toolkit's `configureStore` handles this automatically. affects: >=2.10.0 (if using Redux Thunk 3.0)
Errors
Common errors & fixes
Argument of type 'ThunkAction<any, any, any, AnyAction>' is not assignable to parameter of type 'AnyAction'. Property 'type' is missing in type 'ThunkAction' but required in type 'AnyAction'.
Attempting to dispatch a Redux Thunk action without the `redux-thunk` middleware being applied to the Redux store.
fixEnsure `redux-thunk` middleware is correctly applied: `createStore(reducer, applyMiddleware(thunkMiddleware))`.
Cannot find name 'fetch'. Do you need to install type definitions for a global API such as 'fetch'?
The `fetch` API is used in the quickstart example, but it's a browser API not natively available in Node.js, and its types might be missing in some TypeScript configurations.
fixFor Node.js environments, install a polyfill like `isomorphic-fetch` (`npm install isomorphic-fetch @types/isomorphic-fetch`) and import it: `import 'isomorphic-fetch';`.
Error: Reducer for action 'examples/Login_DONE' not found.
A `typescript-fsa` action (like `login.async.done`) was dispatched, but the corresponding `.case()` handler is missing or incorrectly named in the reducer.
fixVerify that your `reducerWithInitialState` or similar reducer setup includes `.case()` for all `started`, `done`, and `failed` actions created by `asyncFactory`, with the correct action type string.
Audit
Dependencies
reduxrequiredCore Redux library for state management.
redux-thunkrequiredRedux middleware for handling asynchronous actions.
typescript-fsarequiredLibrary for creating type-safe Flux Standard Actions.