{"id":18735,"library":"redux-thunk-fsa","title":"Redux Thunk FSA","description":"FSA-compliant thunk middleware for Redux that extends the standard redux-thunk package to support Flux Standard Actions (FSA). Current stable version is 4.1.1, released 2024-02-15, with regular updates. It allows action creators to return functions (thunks) for asynchronous or conditional dispatching, but with the added ability to handle FSA-compliant actions where the payload contains a dispatch function. Differentiates from redux-thunk by integrating seamlessly with redux-promise for async FSA patterns. Ships TypeScript definitions and supports React Native. Maintained by Makeomatic.","status":"active","version":"4.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/makeomatic/redux-thunk","tags":["javascript","redux","thunk","middleware","redux-middleware","flux","fsa","typescript"],"install":[{"cmd":"npm install redux-thunk-fsa","lang":"bash","label":"npm"},{"cmd":"yarn add redux-thunk-fsa","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-thunk-fsa","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; provides the store and dispatch mechanism middleware interacts with.","package":"redux","optional":true}],"imports":[{"note":"Package exports as default. Named import will not work.","wrong":"import { ReduxThunk } from 'redux-thunk-fsa'","symbol":"default import (reduxThunkFsa)","correct":"import ReduxThunk from 'redux-thunk-fsa'"},{"note":"Middleware must be applied via applyMiddleware; directly passing to createStore is an error.","wrong":"const store = createStore(reducer, ReduxThunk); // Missing applyMiddleware","symbol":"createStore with middleware","correct":"import { createStore, applyMiddleware } from 'redux';\nimport ReduxThunk from 'redux-thunk-fsa';\nconst store = createStore(reducer, applyMiddleware(ReduxThunk));"},{"note":"When using devtools with middleware, compose is required; wrong pattern passes middleware and enhancer as separate args.","wrong":"const store = createStore(reducer, applyMiddleware(ReduxThunk), window.__REDUX_DEVTOOLS_EXTENSION__());","symbol":"compose with middleware","correct":"import { createStore, applyMiddleware, compose } from 'redux';\nimport ReduxThunk from 'redux-thunk-fsa';\nconst store = createStore(reducer, compose(applyMiddleware(ReduxThunk), window.__REDUX_DEVTOOLS_EXTENSION__?.()));"},{"note":"Types are exported as named exports alongside the default export. Use 'import type' for types.","wrong":"import { ThunkAction } from 'redux-thunk-fsa'","symbol":"TypeScript types","correct":"import type { ThunkAction, ThunkDispatch } from 'redux-thunk-fsa'"}],"quickstart":{"code":"import { createStore, applyMiddleware } from 'redux';\nimport ReduxThunk from 'redux-thunk-fsa';\n\n// Example reducer\nfunction counter(state = 0, action) {\n  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1;\n    default:\n      return state;\n  }\n}\n\n// Async action creator returning a thunk\nfunction incrementAsync() {\n  return (dispatch) => {\n    setTimeout(() => {\n      dispatch({ type: 'INCREMENT' });\n    }, 1000);\n  };\n}\n\n// Create store with thunk middleware\nconst store = createStore(counter, applyMiddleware(ReduxThunk));\n\n// Dispatch async action\nstore.dispatch(incrementAsync());\nconsole.log(store.getState()); // 0 initially, then 1 after 1 second","lang":"typescript","description":"Demonstrates basic Redux store setup with redux-thunk-fsa middleware and an async action creator returning a thunk."},"warnings":[{"fix":"Update import statements: use 'redux-thunk-fsa' instead of 'redux-thunk'","message":"Version 3.x changed import path from redux-thunk to redux-thunk-fsa","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Ensure FSA actions follow the Flux Standard Action spec: { type, payload, error, meta }. For thunk payloads, use payload: dispatch => ...","message":"FSA support only works when payload contains a dispatch function; regular thunks without FSA still work.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use compose(applyMiddleware(ReduxThunk), devtoolsEnhancer()) to maintain correct order.","message":"The compose with multiple middlewares pattern using redux-thunk-fsa may conflict with devtools enhancer order.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Add {\"type\": \"module\"} in package.json or rename files to .mjs.","message":"In Node.js with ESM, you must use .mjs extension or set \"type\": \"module\" in package.json.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Use import type { ThunkAction } from 'redux-thunk-fsa'","message":"TypeScript type imports require 'import type' to avoid emitting value imports.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Always include ReduxThunk in applyMiddleware arguments.","message":"Calling applyMiddleware without ReduxThunk will not enable thunk functionality.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use applyMiddleware: const store = createStore(reducer, applyMiddleware(ReduxThunk));","cause":"Passing middleware directly to createStore without applyMiddleware.","error":"TypeError: middleware is not a function"},{"fix":"Install with npm install redux-thunk-fsa and ensure import path is 'redux-thunk-fsa' (not 'redux-thunk').","cause":"Module not installed, or import path is incorrect.","error":"Cannot find module 'redux-thunk-fsa'"},{"fix":"Ensure applyMiddleware(ReduxThunk) is used when creating the store.","cause":"Thunk middleware not applied; async action creator returned a function but middleware didn't handle it.","error":"Error: Actions must be plain objects. Use custom middleware for async actions."},{"fix":"Verify store creation includes applyMiddleware(ReduxThunk) and that the thunk is correctly passed to dispatch.","cause":"Thunk function expects dispatch and getState as arguments, but they are undefined because middleware not applied or incorrectly configured.","error":"Cannot read properties of undefined (reading 'dispatch')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}