ChainedReducer

Chained reducers allows you build a reducer using method chaining.
It utilizes immer hence state mutations are allowed.

Methods

constructor

In most cases, ChainedReducer will be provided by handle.reducer, hence you don't need to use constructor.

Arguments

  1. initialState: object- the initial state.
import { ChainedReducer } from 'typeless';

new ChainedReducer({ foo: 'bar' })

attach(prop, reducer)

Attach a child reducer at the given path.
The child reducer will be only scoped to the nested state State[prop].

Arguments

  1. prop: string - the property name.
  2. reducer: Reducer - the reducer to attach.

Returns

{ChainedReducer} - this reducer.

Example

interface Nested {
  foo: string;
}

interface State {
  sub: Nested;
}

const subReducer = new ChainedReducer({ foo: 'bar' } as Nested);

const reducer = new ChainedReducer(initialState as State)
  .attach('sub', subReducer);

on(actionCreator, fn)

Attach a handler for the specific action creator. The action creator is a function generated by createModule.

Arguments

  1. actionCreator: ActionCreator - the action creator.
  2. handler: (state, payload, action) => void
    The function handler with the following parameters:
    • state: object - the reducer state.
    • payload: object - the action payload. The type is inferred automatically from ActionCreator.
    • action: object - the original action.

Returns

{ChainedReducer} - this reducer.

Example

// interface.ts
import { createModule } from 'typeless';
import { UserSymbol } from './symbol';

const [handle, UserActions] = createModule(UserSymbol)
  .withActions({
    loadUser: (id: number) => ({ payload: { id } }),
    userLoaded: (user: User) => ({ payload: { user } }),
  });

// module.ts
import { handle, UserActions } from './interface';

interface State {
  user: User | null;
}
const initialState: State = {
  user: null,
};

handle
  .reducer(initialState)
  .on(UserActions.userLoaded, (state, { user }) => {
    state.user = user;
  });

onMany(actionCreators[], handler)

Attach a handler for multiple action creators. This function is very similar to on.

Arguments

  1. actionCreators: ActionCreator[] - the action creators to match.
  2. handler: (state, payload, action) => EpicResult

Returns

{ChainedReducer} - this reducer.

Example

// interface.ts
import { createModule } from 'typeless';
import { UserSymbol } from './symbol';

const [handle, UserActions] = createModule(UserSymbol)
  .withActions({
    userLoaded: (user: User) => ({ payload: { user } }),
    userUpdated: (user: User) => ({ payload: { user } }),
  });

// module.ts
import { handle, UserActions } from './interface';

interface State {
  user: User | null;
}
const initialState: State = {
  user: null,
};

handle
  .reducer(initialState)
  .onMany(
    [UserActions.userLoaded, UserActions.userUpdated],
    (state, { user }) => {
      state.user = user;
    }
  );

replace(actionCreator, fn)

Attach a handler for the specific action creator and replace the whole state.

Arguments

  1. actionCreator: ActionCreator - the action creator. Under the hood it checks actionCreator.toString() === action.type.
  2. handler: (state, payload, action) => object
    The function handler must return a new state object.

Returns

{ChainedReducer} - this reducer.

Example

// interface.ts
import { createModule } from 'typeless';
import { UserSymbol } from './symbol';

const [handle, UserActions] = createModule(UserSymbol)
  .withActions({
    reset: null,
  });

// module.ts
import { handle, UserActions } from './interface';

interface State {
  user: User | null;
}
const initialState: State = {
  user: null,
};

handle
  .reducer(initialState)
  .replace(UserActions.reset, () => initialState);

nested(prop, fn)

Create a child reducer at the given path.
The child reducer will be only scoped to the nested state State[prop].

Arguments

  1. prop: string - the property name.
  2. fn: (reducer: Reducer) => Reducer - the function to create a new reducer.

Returns

{ChainedReducer} - this reducer.

Example

// interface.ts
import { createModule } from 'typeless';
import { UserSymbol } from './symbol';

const [handle, UserActions] = createModule(UserSymbol)
  .withActions({
    reset: null,
    setFilter: (filter: string) => ({ payload: { filter } }),
  });

// module.ts
import { handle, UserActions } from './interface';

interface State {
  foo: string;
  search: {
    filter: string;
  };
}

const initialState: State = {
  foo: 'bar',
  search: {
    filter: '',
  },
};

handle
  .reducer(initialState)
  .nested('search', searchReducer =>
    searchReducer.on(UserActions.setFilter, (state, { filter }) => {
      state.filter = filter;
    })
  );
← useSelectorEpic →