ts-action

MiniRx supports writing and consuming actions with ts-action to reduce boilerplate code.

There are also ts-action-operators to consume actions in effects.

Install the packages using npm:

npm install ts-action ts-action-operators

Create Actions:#

ts-todo-actions.ts
import { action, payload } from 'ts-action';
import { Todo } from './todo';
export const addTodo = action('ADD_TODO', payload<Todo>());
export const loadTodos = action('LOAD_TODOS');
export const loadTodosSuccess = action('LOAD_TODOS_SUCCESS', payload<Todo[]>());
export const loadTodosFail = action('LOAD_TODOS_FAIL', payload<Error>());

Dispatch an Action:#

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

Reducer#

import { on, reducer } from 'ts-action';
export interface TodoState {
todos: Todo[];
}
export const initialState: TodoState = {
todos: [],
};
export const todoReducer = reducer(
initialState,
on(addTodo, (state, {payload}) => ({...state, todos: [...state.todos, payload]}))
);

Effects#

Consume actions in effects

import { actions$ } from 'mini-rx-store';
import { mergeMap, map, catchError } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';
import { of } from 'rxjs';
import { ofType } from 'ts-action-operators';
import { loadTodos, loadTodosFail, loadTodosSuccess } from './ts-todo-actions';
export const loadEffect = actions$.pipe(
ofType(loadTodos), // Use ofType from 'ts-action-operators'
mergeMap(() =>
ajax('https://jsonplaceholder.typicode.com/todos').pipe(
map(res => loadTodosSuccess(res.response)),
catchError(err => of(loadTodosFail(err)))
)
)
);
// Register the effect
store.effect(loadEffect);
// Trigger the effect
store.dispatch(loadTodos())