Which Version to use?

Angular 5+

Use @angular-redux/store@^7 - this version supports Angular 5, and also changes to using lettable operators.

Any new major releases will released on the v7 branch and with the @latest tag for final publishes.

Angular 4 or lower

Use @angular-redux/store@^6 - This supports Angular 4 and earlier.

Support for `@angular-redux/store@6`?

Where possible, I will be maintaining and applying any fixes / enhancements for v7 into v6 where it does not introduce a breaking change.

I made a few mistakes trying to publish fixes / etc to two major versions, which caused some releases to get tagged incorrectly and caused some confusion. Sorry for any confusion this has caused, and will do better on avoiding this in the future, and being more transparent with the releases that are going out.

@angular-redux/store

Angular bindings for Redux.

For Angular 1 see ng-redux

What is Redux?

Redux is a popular approach to managing state in applications. It emphasises:

A single, immutable data store.
One-way data flow.
An approach to change based on pure functions and a stream of actions.

You can find lots of excellent documentation here: Redux.

What is @angular-redux?

We provide a set of npm packages that help you integrate your redux store into your Angular 2+ applications. Our approach helps you by bridging the gap with some of Angular's advanced features, including:

Change processing with RxJS observables.
Compile time optimizations with NgModule and Ahead-of-Time compilation.
Integration with the Angular change detector.

Getting Started

I already know what Redux and RxJS are. Give me the TL;DR.
I'm just learning about Redux. Break it down for me!
Talk is cheap. Show me a complete code example.
Take me to the API docs.

Examples

Here are some examples of the angular-redux family of packages in action:

Companion Packages

Resources

In-Depth Usage

@angular-redux/store uses an approach to redux based on RxJS Observables to select and transform data on its way out of the store and into your UI or side-effect handlers. Observables are an efficient analogue to reselect for the RxJS-heavy Angular world.

Hacking on angular-redux/store

Want to hack on angular-redux/store or any of the related packages? Feel free to do so, but please test your changes before making any PRs.

Here's how to do that:

Write unit tests. You can check that they work by running npm test.
Run the linter. If your editor doesn't do it automatically, do it manually with npm run lint.
Test your changes in a 'real world scenario'. We use the example-app for this, using some npm fakery to 'publish the package locally':
clone the example app (git clone https://github.com/angular-redux/example-app.git)
generate a 'local package' (cd to your angular-redux/store clone and run npm pack). This will create a .tgz file.
hook your 'local package' up to your example-app (cd to your example-app clone and run npm install --save /path/to/the/tgz/file/from/above)
run ng serve --aot

Please make sure your changes pass Angular's AoT compiler, because it's a bit finicky with TS syntax.

Index

Classes

Interfaces

Type aliases

Functions

Type aliases

Comparator

Comparator: function

Custom equality checker that can be used with .select and @select. `ts const customCompare: Comparator = (x: any, y: any) => { return x.id === y.id }

@select(selector, customCompare) `

Type declaration

- (x: any, y: any): boolean
- Parameters
  - x: any
  - y: any
  Returns boolean

FunctionSelector

FunctionSelector: function

Type declaration

- (s: RootState): S
- Parameters
  - s: RootState
  Returns S

PathSelector

PathSelector: (string | number)[]

PropertySelector

PropertySelector: string | number | symbol

Selector

Selector: PropertySelector | PathSelector | FunctionSelector<RootState, S>

Transformer

Transformer: function

Type declaration

- (store$: Observable<RootState>, scope: any): Observable<V>
- Parameters
  - store$: Observable<RootState>
  - scope: any
  Returns Observable<V>

Functions

WithSubStore

WithSubStore(__namedParameters: object): ClassDecorator

- Defined in decorators/with-sub-store.ts:11
Modifies the behaviour of any @select, @select$, or @dispatch decorators to operate on a substore defined by the IFractalStoreOptions.

See: https://github.com/angular-redux/store/blob/master/articles/fractal-store.md for more information about SubStores.

Parameters
- __namedParameters: object
Returns ClassDecorator

dispatch

dispatch(): PropertyDecorator

- Defined in decorators/dispatch.ts:10
Auto-dispatches the return value of the decorated function.

Decorate a function creator method with @dispatch and its return value will automatically be passed to ngRedux.dispatch() for you.

Returns PropertyDecorator

enableFractalReducers

enableFractalReducers(rootReducer: Reducer<any, AnyAction>): function

- Defined in components/fractal-reducer-map.ts:19
Parameters
- rootReducer: Reducer<any, AnyAction>
  
  Call this on your root reducer to enable SubStore functionality for pre-configured stores (e.g. using NgRedux.provideStore()). NgRedux.configureStore does it for you under the hood.
Returns function
- - (state: S | undefined, action: A): S
  - Parameters
    - state: S | undefined
    - action: A
    Returns S

select

select<T>(selector?: Selector<any, T>, comparator?: Comparator): PropertyDecorator

- Defined in decorators/select.ts:23
Selects an observable from the store, and attaches it to the decorated property.
```
 import { select } from '@angular-redux/store';

 class SomeClass {
   @select(['foo','bar']) foo$: Observable<string>
}
```
Type parameters
- T
Parameters
- Optional selector: Selector<any, T>
  
  A selector function, property name string, or property name path (array of strings/array indices) that locates the store data to be selected
- Optional comparator: Comparator
  
  Function used to determine if this selector has changed.
Returns PropertyDecorator

select$

select$<T>(selector: Selector<any, T>, transformer: Transformer<any, T>, comparator?: Comparator): PropertyDecorator

- Defined in decorators/select.ts:60
Selects an observable using the given path selector, and runs it through the given transformer function. A transformer function takes the store observable as an input and returns a derived observable from it. That derived observable is run through distinctUntilChanges with the given optional comparator and attached to the store property.

Think of a Transformer as a FunctionSelector that operates on observables instead of values.
```
import { select$ } from 'angular-redux/store';

export const debounceAndTriple = obs$ => obs$
 .debounce(300)
 .map(x => 3 * x);

class Foo {
 @select$(['foo', 'bar'], debounceAndTriple)
 readonly debouncedFooBar$: Observable<number>;
}
```
Type parameters
- T
Parameters
- selector: Selector<any, T>
- transformer: Transformer<any, T>
- Optional comparator: Comparator
Returns PropertyDecorator

Generated using TypeDoc

Which Version to use?

Angular 5+

Angular 4 or lower

Support for @angular-redux/store@6?

@angular-redux/store

What is Redux?

What is @angular-redux?

Getting Started

Examples

Companion Packages

Resources

In-Depth Usage

Hacking on angular-redux/store

Index

Classes

Interfaces

Type aliases

Functions

Type aliases

Comparator

Type declaration

Parameters

x: any

y: any

Returns boolean

FunctionSelector

Type declaration

Parameters

s: RootState

Returns S

PathSelector

PropertySelector

Selector

Transformer

Type declaration

Parameters

store$: Observable<RootState>

scope: any

Returns Observable<V>

Functions

WithSubStore

Parameters

__namedParameters: object

Returns ClassDecorator

dispatch

Returns PropertyDecorator

enableFractalReducers

Parameters

rootReducer: Reducer<any, AnyAction>

Returns function

Parameters

state: S | undefined

action: A

Returns S

select

Type parameters

T

Parameters

Optional selector: Selector<any, T>

Optional comparator: Comparator

Returns PropertyDecorator

select$

Type parameters

T

Parameters

selector: Selector<any, T>

transformer: Transformer<any, T>

Optional comparator: Comparator

Returns PropertyDecorator

Support for `@angular-redux/store@6`?