typescript-action-creator
v0.8.0
Published
Helper that creates simple React and Redux compatible action creators that work well with Typescript.
Downloads
411
Maintainers
Readme
Typescript Action Creator
Helper that creates simple React and Redux compatible action creators that work well with Typescript.
Installation
npm install typescript-action-creator --save-dev
Example
Create a simple action creator in one line:
import { createAction } from 'typescript-action-creator';
const setLoading = createAction('SET_LOADING');
setLoading(); // { type: 'SET_LOADING' }
Or create an action creator with payload in one line:
import { createAction } from 'typescript-action-creator';
const setProgress = createAction('SET_PROGRESS', (progress: number) => progress);
setProgress(50); // { type: 'SET_PROGRESS', payload: 50 }
In your component you can use this action creators as following:
import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { setLoading } from './actions/setLoading';
import { setProgress } from './actions/setProgress';
const MyComponent = () => {
const dispatch = useDispatch();
const onClick = useCallback(() => {
dispatch(setLoading()); // { type: 'SET_LOADING' }
dispatch(setProgress(50)); // { type: 'SET_PROGRESS', payload: 50 }
}, [dispatch]);
return <button onClick={onClick}>Example</button>;
};
We also provide a nice isActionType
method that is useful in reducers. The isActionType
method is a
Typescript Type Guard: It will check if the
action is a result of the action creator. If so, then the action is automatically type casted to the correct
action type, including the payload.
import { Action, isActionType } from 'typescript-action-creator';
import { State } from './State';
import { setLoading } from './actions/setLoading';
import { setProgress } from './actions/setProgress';
const reducer = (state: State, action: Action) => {
if (isActionType(action, setLoading)) {
return { ...state, loading: true };
}
if (isActionType(action, setProgress)) {
const progress = action.payload; // This is automatically a number!
return { ...state, progress };
}
return state;
};
Each action creator also exports a 'TYPE' property. This can be useful in places where you need the string type but do not want to use a hardcoded string. For instance when we use Redux Saga's:
import { all, takeEvery } from 'redux-saga/effects';
import { createAction } from 'typescript-action-creator';
const createItem = createAction('CREATE_ITEM');
const deleteItem = createAction('DELETE_ITEM');
const updateItem = createAction('UPDATE_ITEM');
function* createItemSaga() { ... }
function* deleteItemSaga() { ... }
function* updateItemSaga() { ... }
function* itemSaga() {
yield all([
takeEvery(createItem.TYPE, createItemSaga),
takeEvery(deleteItem.TYPE, deleteItemSaga),
takeEvery(updateItem.TYPE, updateItemSaga),
]);
}
In a nutshell, here are all the types and what they return:
import { Action, createAction, isActionType } from 'typescript-action-creator';
import { State } from './State';
const setLoading = createAction('SET_LOADING');
const setProgress = createAction('SET_PROGRESS', (progress: number) => progress);
type SetLoadingAction = ReturnType<typeof setLoading>; // Action<'SET_LOADING'>
type SetProgressAction = ReturnType<typeof setProgress>; // Action<'SET_PROGRESS', number>
const setLoadingAction = setLoading(); // { type: 'SET_LOADING' }
const setProgressAction = setProgress(50); // { type: 'SET_PROGRESS', payload: 50 }
console.info(setLoadingAction.type); // 'SET_LOADING'
console.info(setProgressAction.type); // 'SET_PROGRESS'
console.info(setProgressAction.payload); // 50
console.info(setLoading.TYPE); // 'SET_LOADING'
console.info(setProgress.TYPE); // 'SET_PROGRESS'
const reducer = (state: State, action: Action) => {
if (isActionType(action, setLoading)) {
return { ...state, loading: true };
}
if (isActionType(action, setProgress)) {
const progress = action.payload; // 50
return { ...state, progress };
}
return state;
};