TypeScript FSA Utilities for Redux Thunk

Common errors

• 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'.

  cause Attempting to dispatch a Redux Thunk action without the `redux-thunk` middleware being applied to the Redux store.
  fix Ensure `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'?

  cause 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.
  fix For 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.

  cause A `typescript-fsa` action (like `login.async.done`) was dispatched, but the corresponding `.case()` handler is missing or incorrectly named in the reducer.
  fix Verify 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.

Warnings

• breaking Version 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.
  Fix: Review 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.
• 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.
  Fix: Ensure `applyMiddleware(thunkMiddleware)` is used when creating your Redux store, and that `thunkMiddleware` is correctly typed as `ThunkMiddleware<State, AnyAction>`.
• gotcha Properly typing the `dispatch` function within Redux thunks, especially when dispatching other thunks or specific actions, requires careful configuration using `ThunkMiddleware` or explicitly defining `AppDispatch`.
  Fix: When 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.
• gotcha This 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.
  Fix: Verify that `typescript-fsa` is installed at version `3.x` or higher (`npm install typescript-fsa@^3`).
• deprecated Redux-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.
  Fix: If manually importing `redux-thunk` directly, use `import { thunk } from 'redux-thunk';` instead of the default import. Redux Toolkit's `configureStore` handles this automatically.

Install

• npm install typescript-fsa-redux-thunk npm
• yarn add typescript-fsa-redux-thunk yarn
• pnpm add typescript-fsa-redux-thunk pnpm

Imports

• asyncFactory
  wrong:

  const asyncFactory = require('typescript-fsa-redux-thunk').asyncFactory;

  correct:

  import { asyncFactory } from 'typescript-fsa-redux-thunk';

  `asyncFactory` is the primary export for creating asynchronous Redux Thunk actions using `typescript-fsa` patterns.
• thunkToAction
  wrong:

  const thunkToAction = require('typescript-fsa-redux-thunk').thunkToAction;

  correct:

  import { thunkToAction } from 'typescript-fsa-redux-thunk';

  `thunkToAction` is a utility for casting ThunkActionCreators, often used with `bindActionCreators`.
• create
  wrong:

  import { create } from 'typescript-fsa';

  correct:

  import actionCreatorFactory from 'typescript-fsa';

  While `typescript-fsa-redux-thunk` is a companion, the base `actionCreatorFactory` comes from `typescript-fsa` itself and is a default import.

Quickstart

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);
  }
})();