Getting Started

Deox is the utility belt for FSA-compliant actions that can be used together with Redux or NGRX/NGXS.

Installation

For Yarn users:

xxxxxxxxxx

yarn add deox

For NPM users:

xxxxxxxxxx

npm install --save deox

The Deox NPM package contains a CommonJS build that can be used with Node application or module bundlers (e.g. Rollup, Webpack, etc.). it also includes an ESM build that works well with tree-shaking.

Typescript tip: notice that Deox internally uses some ES2015 type definitions to represent better developer experience. So if you are using Typescript and targeting es5, be sure es2015 lib has been added in the tsconfig.json:

xxxxxxxxxx

{

  "compilerOptions": {

    ...

    "target": "es5",

    "lib": ["es2015"]

  }

}

If you don't use module bundler, it's also fine. The Deox NPM package also includes a production minified UMD build that makes Deox available as global variable called window.Deox; you can add it simply to your page via following script tag:

xxxxxxxxxx

<script src="https://unpkg.com/deox@latest"></script>

Basic Usage

Deox provides lots of helpful utility functions and types to help you reduce Flux boilerplate; You can see all of these utilities at API reference page.

The most important utility functions that Deox provides are:

• createActionCreator: creates an action creator by given action type (AKA createAction)
• createReducer: creates a reducer by given default state and an array of action handlers

Let's see the famous simple counter example:

xxxxxxxxxx

import { createActionCreator, createReducer } from 'deox'

​

const increment = createActionCreator('INCREMENT')

const decrement = createActionCreator('DECREMENT')

const reset = createActionCreator('RESET', resolve => (count: number) => resolve(count))

​

const defaultState = 0

​

const counterReducer = createReducer(defaultState, handleAction => [

    handleAction(increment, state => state + 1),

    handleAction(decrement, state => state - 1),

    handleAction(reset, (_state, { payload }) => payload),

])

​

counterReducer(undefined, increment()) //=> 1

counterReducer(undefined, decrement()) //=> -1

counterReducer(3, reset(0)) //=> 0

It's that simple but there is a hidden feature in the above example that makes Deox wonderful. Although there isn't any type notation in the above example but there is full type-safety. How? It's Magic!

More Examples

The Deox repository contains several example demonstrating various aspects of how to use Deox.

• Tasks: Source

Help and Discussion

You can ask questions on Deox repository with an issue.