TypeScript FSA utilities for redux-thunk

NOTE: There's breaking changes from 1.x. Read on to find out more and check the notes at the bottom for more info

Installation

1npm install typescript-fsa-redux-thunk redux redux-thunk

API

thunkToAction(ThunkActionCreator): ((Params) => Result)

Another useful cast function that can help when attempting to extract the return value out of your async action creator. If the action is being pre-bound to dispatch, then all we want back is the return value (the action object). Coming soon: an example. TL;DR: pass your async action creator into this before passing it to bindActionCreators or the mapDispatchToProps object (react-redux).

asyncFactory<State>(ActionCreatorFactory): ((type: string, AsyncWorker) => ({ (params?): ThunkActionCreator, async: AsyncActionCreators }))

Factory function to easily create a typescript-fsa redux thunk.

Example

1import 'isomorphic-fetch';
2import { createStore, applyMiddleware, AnyAction } from 'redux';
3import thunkMiddleware, { ThunkMiddleware } from 'redux-thunk';
4import { reducerWithInitialState } from 'typescript-fsa-reducers';
5import actionCreatorFactory from 'typescript-fsa';
6import { asyncFactory } from 'typescript-fsa-redux-thunk';
7
8/** You can optionally use custom Error types */
9class CustomError extends Error {}
10
11/** Parameters used for logging in */
12interface LoginParams {
13  email: string;
14  password: string;
15}
16
17/** The object that comes back from the server on successful login */
18interface UserToken {
19  token: string;
20}
21
22/** The shape of our Redux store's state */
23interface State {
24  title: string;
25  userToken: UserToken;
26  loggingIn?: boolean;
27  error?: CustomError;
28}
29
30/** The typescript-fsa action creator factory function */
31const create = actionCreatorFactory('examples');
32
33/** The typescript-fsa-redux-thunk async action creator factory function */
34const createAsync = asyncFactory<State>(create);
35
36/** Normal synchronous action */
37const changeTitle = create<string>('Change the title');
38
39/** The asynchronous login action; Error type is optional */
40const login = createAsync<LoginParams, UserToken, CustomError>(
41  'Login',
42  async (params, dispatch) => {
43    const url = `https://reqres.in/api/login`;
44    const options: RequestInit = {
45      method: 'POST',
46      body: JSON.stringify(params),
47      headers: {
48        'Content-Type': 'application/json; charset=utf-8',
49      },
50    };
51    const res = await fetch(url, options);
52    if (!res.ok) {
53      throw new CustomError(`Error ${res.status}: ${res.statusText}`);
54    }
55
56    dispatch(changeTitle('You are logged-in'));
57
58    return res.json();
59  },
60);
61
62/** An initial value for the application state */
63const initial: State = {
64  title: 'Please login',
65  userToken: {
66    token: '',
67  },
68};
69
70/** Reducer, handling updates to indicate logging-in status/error */
71const reducer = reducerWithInitialState(initial)
72  .case(changeTitle, (state, title) => ({
73    ...state,
74    title,
75  }))
76  .case(login.async.started, (state) => ({
77    ...state,
78    loggingIn: true,
79    error: undefined,
80  }))
81  .case(login.async.failed, (state, { error }) => ({
82    ...state,
83    loggingIn: false,
84    error,
85  }))
86  .case(login.async.done, (state, { result: userToken }) => ({
87    ...state,
88    userToken,
89    loggingIn: false,
90    error: undefined,
91  }));
92
93/** Putting it all together */
94(async () => {
95  // Declaring the type of the redux-thunk middleware is what makes
96  // `store.dispatch` work. (redux@4.x, redux-thunk@2.3.x)
97  const thunk: ThunkMiddleware<State, AnyAction> = thunkMiddleware;
98  const store = createStore(reducer, applyMiddleware(thunk));
99
100  console.log(store.getState().title);
101
102  try {
103    // See https://reqres.in/api/users for valid users on this site
104    await store.dispatch(
105      login({
106        email: 'eve.holt@reqres.in',
107        password: 'cityslicka',
108      }),
109    );
110
111    const { title, userToken } = store.getState();
112
113    console.log(title, userToken);
114  } catch (err) {
115    console.log(err);
116  }
117})();

Note: A change from 1.x is the result type is not always assumed to be a Promise. If you want the result to be a promise, just return one from your worker function; but continue to specify the result as T rather than Promise<T> (same as 1.x).

The API has been simplified. This release is in preparation for a new project that works with react hooks. Coming soon!

react-redux integrated

1import { ThunkDispatch, AnyAction } from 'redux-thunk';
2import { RootState } from 'to/your/reducers';
3
4declare module 'react-redux' {
5  interface DefaultRootState extends RootState {}
6
7  function useDispatch(): ThunkDispatch<RootState, never, AnyAction>;
8}
9
10declare module 'typescript-fsa-redux-thunk' {
11  interface DefaultRootState extends RootState {}
12}