ts-redux-actions

TS Redux Actions

Redux helpers for Type-safety (action types & action creators)

• Semantic Versioning
• No external dependencies
• Output separate bundles for your specific workflow needs:
  • ES5 + CommonJS - main
  • ES5 + ES-Modules - module
  • ES2015 + CommonJS - jsnext:main

Table of Contents (v1.0)

• Motivation
• API
  • createAction
  • createActions (WIP)

---

Motivation

I wasn't satisfied with the API design in redux-actions. The reason was because of the specific API design (allowing multiple args for action creator) and separate payload, meta map functions which is not good for static typing in TypeScript. It doesn't allow for correct type inference and will force you to do an extra effort for explicit type annotations and produce more boilerplate. The most issues with redux-actions types are related to losing your function definition intellisense and named arguments in resulting action creator which for me is unacceptable.

In examples part I will show you exactly the difference in API design but also between resulting (action creators) definitions coming from my solution and from redux-actions so you can clearly see the benefits.

---

API

For more advanced usage scenarios please check use cases described in test specification

createAction

> Advanced Usage

createAction(type, creatorFunction?)
type: string,
creatorFunction: (type: T) => (...args: any[]) => { type: T, payload?: P, meta?: M }
return: (...args: any[]) => { type: T, payload?: P, meta?: M }

Examples:

it('no payload', () => {
  const increment = createAction('INCREMENT');

  expect(increment()).toEqual({ type: 'INCREMENT' });
  expect(increment.type).toBe('INCREMENT');
});

it('with payload', () => {
  const add = createAction('ADD', (type: 'ADD') => (amount: number) =>
    ({ type, payload: amount }),
  );

  expect(add(10)).toEqual({ type: 'ADD', payload: 10 });
  expect(add.type).toBe('ADD');
});

it('with payload and meta', () => {
  const notify = createAction('NOTIFY', (type: 'NOTIFY') =>
    (username: string, message: string) => ({
      type,
      payload: { message: `${username}: ${message}` },
      meta: { username, message },
    }),
  );

  expect(notify('Piotr', 'Hello!')).toEqual({
    type: 'NOTIFY',
    payload: { message: 'Piotr: Hello!' },
    meta: { username: 'Piotr', message: 'Hello!' },
  });
  expect(notify.type).toBe('NOTIFY');
});

createActions

(WIP)

---

MIT License

Copyright (c) 2017 Piotr Witek [e-mail] (http://piotrwitek.github.io)