@angular-redux/store

  • Version 10.0.0
  • Published
  • 651 kB
  • No dependencies
  • MIT license

Install

npm i @angular-redux/store
yarn add @angular-redux/store
pnpm add @angular-redux/store

Overview

Angular bindings for Redux

Index

Functions

function dispatch

dispatch: () => PropertyDecorator;
  • Auto-dispatches the return value of the decorated function.

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

function enableFractalReducers

enableFractalReducers: (
rootReducer: Reducer<any, AnyAction>
) => Reducer<any, AnyAction>;
  • Parameter rootReducer

    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.

function select

select: <T>(
selector?: Selector<any, T>,
comparator?: Comparator
) => PropertyDecorator;
  • 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>
    }

    Parameter selector

    A selector function, property name string, or property name path (array of strings/array indices) that locates the store data to be selected

    Parameter comparator

    Function used to determine if this selector has changed.

function select$

select$: <T>(
selector: Selector<any, T>,
transformer: Transformer<any, T>,
comparator?: Comparator
) => PropertyDecorator;
  • 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>;
    }

function WithSubStore

WithSubStore: ({
basePathMethodName,
localReducer,
}: FractalStoreOptions) => ClassDecorator;
  • 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/platform/blob/master/packages/store/articles/fractal-store.md for more information about SubStores.

Classes

class DevToolsExtension

class DevToolsExtension {}
  • An angular-2-ified version of the Redux DevTools chrome extension.

constructor

constructor(appRef: ApplicationRef, ngRedux: NgRedux<any>);

property enhancer

enhancer: (options?: EnhancerOptions) => StoreEnhancer<any, {}>;
  • A wrapper for the Chrome Extension Redux DevTools. Makes sure state changes triggered by the extension trigger Angular2's change detector.

    options: dev tool options; same format as described here: [zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md]

property getDevTools

getDevTools: () => ReduxDevTools;
  • Returns the redux devtools enhancer.

property isEnabled

isEnabled: () => boolean;
  • Returns true if the extension is installed and enabled.

class NgRedux

abstract class NgRedux<RootState> implements ObservableStore<RootState> {}
  • This is the public interface of @angular-redux/store. It wraps the global redux store and adds a few other add on methods. It's what you'll inject into your Angular application as a service.

property configureStore

abstract configureStore: (
rootReducer: Reducer<RootState, AnyAction>,
initState: RootState,
middleware?: Middleware[],
enhancers?: StoreEnhancer<RootState>[]
) => void;
  • Configures a Redux store and allows NgRedux to observe and dispatch to it.

    This should only be called once for the lifetime of your app, for example in the constructor of your root component.

    Parameter rootReducer

    Your app's root reducer

    Parameter initState

    Your app's initial state

    Parameter middleware

    Optional Redux middlewares

    Parameter enhancers

    Optional Redux store enhancers

property configureSubStore

abstract configureSubStore: <SubState>(
basePath: PathSelector,
localReducer: Reducer<SubState, AnyAction>
) => ObservableStore<SubState>;

    property dispatch

    abstract dispatch: Dispatch<AnyAction>;

      property getState

      abstract getState: () => RootState;

        property instance

        static instance?: ObservableStore<any>;
        • @hidden,

          Deprecated

        property provideStore

        abstract provideStore: (store: Store<RootState>) => void;
        • Accepts a Redux store, then sets it in NgRedux and allows NgRedux to observe and dispatch to it.

          This should only be called once for the lifetime of your app, for example in the constructor of your root component. If configureStore has been used this cannot be used.

          Parameter store

          Your app's store

        property replaceReducer

        abstract replaceReducer: (nextReducer: Reducer<RootState, AnyAction>) => void;

          property select

          abstract select: <SelectedType>(
          selector?: Selector<RootState, SelectedType>,
          comparator?: Comparator
          ) => Observable<SelectedType>;

            property subscribe

            abstract subscribe: (listener: () => void) => Unsubscribe;

              class NgReduxModule

              class NgReduxModule {}

                Interfaces

                interface ObservableStore

                interface ObservableStore<StateType> extends Store<StateType> {}
                • This interface represents the glue that connects the subscription-oriented Redux Store with the RXJS Observable-oriented Angular component world.

                  Augments the basic Redux store interface with methods to enable selection and fractalization.

                property configureSubStore

                configureSubStore: <SubState>(
                basePath: PathSelector,
                localReducer: Reducer<SubState, AnyAction>
                ) => ObservableStore<SubState>;
                • Carves off a 'subStore' or 'fractal' store from this one.

                  The returned object is itself an observable store, however any selections, dispatches, or invocations of localReducer will be specific to that substore and will not know about the parent ObservableStore from which it was created.

                  This is handy for encapsulating component or module state while still benefiting from time-travel, etc.

                property select

                select: <SelectedType>(
                selector: Selector<StateType, SelectedType>,
                comparator?: Comparator
                ) => Observable<SelectedType>;
                • Select a slice of state to expose as an observable.

                  Parameter selector

                  key or function to select a part of the state

                  Parameter comparator

                  Optional comparison function called to test if an item is distinct from the previous item in the source.

                  Returns

                  An Observable that emits items from the source Observable with distinct values.

                Type Aliases

                type Comparator

                type Comparator = (x: any, y: any) => boolean;
                • Custom equality checker that can be used with .select and @select.

                  const customCompare: Comparator = (x: any, y: any) => {
                  return x.id === y.id
                  }
                  @select(selector, customCompare)

                type FunctionSelector

                type FunctionSelector<RootState, S> = (s: RootState) => S;

                  type PathSelector

                  type PathSelector = (string | number)[];

                    type PropertySelector

                    type PropertySelector = string | number | symbol;

                      type Selector

                      type Selector<RootState, S> =
                      | PropertySelector
                      | PathSelector
                      | FunctionSelector<RootState, S>;

                        type Transformer

                        type Transformer<RootState, V> = (
                        store$: Observable<RootState>,
                        scope: any
                        ) => Observable<V>;

                          Package Files (10)

                          Dependencies (0)

                          No dependencies.

                          Dev Dependencies (1)

                          Peer Dependencies (3)

                          Badge

                          To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                          You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@angular-redux/store.

                          • Markdown
                            [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@angular-redux/store)
                          • HTML
                            <a href="https://www.jsdocs.io/package/@angular-redux/store"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>