Skip to main content

Actions

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.

store.dispatch(addTodo);

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',
    payload
  }
}

Dispatch the action:

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

Class-based Action Creators (TypeScript)​

todo.ts
export interface Todo {
  id: number;
  title: string;
}
todo-actions.ts
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.

Ts-action​

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