ts-action-immer

What is it?

The ts-action-immer package contains an alternative implementation of the on function in ts-action that uses Immer.

Why might you need it?

If you like the action and reducer creators in ts-action or in NgRx - which are based on those in ts-action - and also like Immer, you might want to use this package's Immer-based on function to create your reducers.

Install

Install the package using npm:

npm install ts-action-immer --save

Usage

The reducer function - from ts-action - creates a reducer function out of the combined, action-specific reducers declared using the on function.

The on function creates a reducer for a specific, narrowed action and returns an object - containing the created reducer and the types of one or more action creators.

The reducer within each on function is passed a state that is an Immer Draft. The reducers can either modify the draft state and return nothing or can return a new state.

import { action, props, reducer } from "ts-action";
import { on } from "ts-action-immer";

const foo = action("FOO", props<{ foo: number }>());
const bar = action("BAR", props<{ bar: number }>());
const fooError = action("FOO_ERROR", props<{ foo: number, error: {} }>());
const barError = action("BAR_ERROR", props<{ bar: number, error: {} }>());

interface State { foo?: number; bar?: number; error?: {} }
const initialState: State = {};

const fooBarReducer = reducer(
  initialState,
  on(foo, (state, { foo }) => { state.foo = foo; }),
  on(bar, (state, { bar }) => { state.bar = bar; }),
  on(fooError, barError, (state, { error }) => { state.error = error; })
);