⚛️ Redux-Actions with TypeScript helper package
yarn add redux-actions-ts
import { createAsyncActions, createTypedAction } form 'redux-actions-ts'
// async example
const {
request: signInRequest,
success: signInSuccess,
failure: signInFailure,
} = createAsyncActions<Credentials, User>('SIGN_IN')
// Create your payload type somewhere
// type Credentials = { username: string, password: string }
// type User = { name: string }
// just typed action (ie. not async)
const signOut = createTypedAction<null>('SIGN_OUT')
import { handleTypedActions, createTypedHandler } form 'redux-actions-ts'
const signIn = handleTypedActions(
[
createTypedHandler(signInSuccess, signInSuccessReducer),
createTypedHandler(signInFailure, signInFailureReducer),
createTypedHandler(signOut, signOutReducer),
],
{
user: {
isAuthenticated: false
}
},
)
// later combine your reducers...
import React from 'react'
import { useDispatchAsync } from 'react-redux-dispatch-async'
export default function MyUserInterface({ id }: { id: string }) {
// 👉 pass action and arguments into the array
const response = useDispatchAsync(getUserActionRequest, [id])
switch (response.status) {
case 'loading':
return <AppLoader />
case 'error':
return <Text>{response.error.message}</Text>
case 'success':
return <User {...response.result} />
case 'timeout':
return <Text>{'timeout ¯\\_(ツ)_//¯'}</Text>
case 'canceled':
return <Text>{'canceled ¯\\_(ツ)_//¯'}</Text>
default:
return null
}
}
Below is a list of commands you will probably find useful.
Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.
Your library will be rebuilt if you make edits.
Bundles the package to the dist
folder.
The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.
Looking for a ReactNative freelance expert with more than 14 years of experience? Contact Xavier from his website!