npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@angular-redux/store

v10.0.0

Published

Angular bindings for Redux

Downloads

48,495

Readme

Which Version to use?

Angular 6+

@angular-redux/store@^9 is what you need. This consumes breaking changes from RxJS and Angular 6, as well as updated typedefs from Redux 4.

Angular 5

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

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

Join the chat at https://gitter.im/angular-redux/ng2-redux CircleCI npm version downloads per month

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

Installation

@angular-redux/store has a peer dependency on redux, so we need to install it as well.

npm install --save redux @angular-redux/store

Quick Start

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './containers/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Import the NgReduxModule class and add it to your application module as an import. Once you've done this, you'll be able to inject NgRedux into your Angular components. In your top-level app module, you can configure your Redux store with reducers, initial state, and optionally middlewares and enhancers as you would in Redux directly.

import { NgReduxModule, NgRedux } from '@angular-redux/store';
import { createLogger } from 'redux-logger';
import { rootReducer } from './reducers';

interface IAppState {
  /* ... */
}

@NgModule({
  /* ... */
  imports: [, /* ... */ NgReduxModule],
})
export class AppModule {
  constructor(ngRedux: NgRedux<IAppState>) {
    ngRedux.configureStore(rootReducer, {}, [createLogger()]);
  }
}

Or if you prefer to create the Redux store yourself you can do that and use the provideStore() function instead:

import {
  applyMiddleware,
  Store,
  combineReducers,
  compose,
  createStore,
} from 'redux';
import { NgReduxModule, NgRedux } from '@angular-redux/store';
import { createLogger } from 'redux-logger';
import { rootReducer } from './reducers';

interface IAppState {
  /* ... */
}

export const store: Store<IAppState> = createStore(
  rootReducer,
  applyMiddleware(createLogger()),
);

@NgModule({
  /* ... */
  imports: [, /* ... */ NgReduxModule],
})
class AppModule {
  constructor(ngRedux: NgRedux<IAppState>) {
    ngRedux.provideStore(store);
  }
}

Note that we're also using a Redux middleware from the community here: redux-logger. This is just to show off that @angular-redux/store is indeed compatible with Redux middlewares as you might expect.

Note that to use it, you'll need to install it with npm install --save redux-logger and type definitions for it with npm install --save-dev @types/redux-logger.

Now your Angular app has been reduxified! Use the @select decorator to access your store state, and .dispatch() to dispatch actions:

import { select } from '@angular-redux/store';

@Component({
  template:
    '<button (click)="onClick()">Clicked {{ count | async }} times</button>',
})
class App {
  @select() count$: Observable<number>;

  constructor(private ngRedux: NgRedux<IAppState>) {}

  onClick() {
    this.ngRedux.dispatch({ type: INCREMENT });
  }
}

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.

Read more here: Select Pattern

We also have a number of 'cookbooks' for specific Angular topics:

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:

  1. Write unit tests. You can check that they work by running npm test.
  2. Run the linter. If your editor doesn't do it automatically, do it manually with npm run lint.
  3. 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.