Skip to main content


Actions represent unique events in our application. Reducer functions will process the actions in order to update state.

An action is a simple object with a type property:

const addTodo = {
type: 'ADD_TODO',
// Besides `type`, the structure of an action object is really up to you.
payload: 'Use Redux'

Now we can dispatch the addTodo action to the store and let the reducers calculate the new global state.


Action Creators

Of course, we do not want to create these action objects "by hand" when we need to dispatch an action. Action Creators will do the repetitive work for us.

"Classic" Action Creators

export function addTodo(payload) {
return {
type: 'ADD_TODO',

Dispatch the action:

store.dispatch(addTodo({id: 1, title: 'Use Redux'}));

Class-based Action Creators (TypeScript)

export interface Todo {
id: number;
title: string;
import { Action } from 'mini-rx-store';
import { Todo } from './todo';

export enum TodoActionTypes {
AddTodo = 'ADD_TODO',
RemoveTodo = 'REMOVE_TODO'

export class AddTodo implements Action {
readonly type = TodoActionTypes.AddTodo;
constructor(public payload: Todo) {}

export class RemoveTodo implements Action {
readonly type = TodoActionTypes.RemoveTodo;
constructor(public payload: number) {}

// Union the valid types
export type TodoActions = AddTodo | RemoveTodo;

Dispatch the actions:

store.dispatch(new AddTodo({id: 1, title: 'Use Redux'}));

store.dispatch(new RemoveTodo(1))

The upcoming code examples use Class-based Action Creators.


With ts-action you can create actions and reducers with a minimum of boilerplate code. Read more in the ts-action section.