Gathering detailed insights and metrics for @fractal-web/typescript-fsa-redux-thunk
Gathering detailed insights and metrics for @fractal-web/typescript-fsa-redux-thunk
Gathering detailed insights and metrics for @fractal-web/typescript-fsa-redux-thunk
Gathering detailed insights and metrics for @fractal-web/typescript-fsa-redux-thunk
TypeScript FSA utilities for redux-thunk - shamelessly based on typescript-fsa-redux-saga and ...
npm install @fractal-web/typescript-fsa-redux-thunk
Typescript
Module System
Node Version
NPM Version
71.8
Supply Chain
98.9
Quality
75.8
Maintenance
100
Vulnerability
100
License
Updated on 16 May 2024
Minified
Minified + Gzipped
TypeScript (100%)
Cumulative downloads
Total Downloads
Last day
0%
Compared to previous day
Last week
50%
Compared to previous week
Last month
-35.3%
Compared to previous month
Last year
0%
Compared to previous year
3
1npm install typescript-fsa-redux-thunk redux redux-thunk
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
integrated1import { 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}
No vulnerabilities found.
No security vulnerabilities found.