README.md

Angular 2 Redux Chat

This repo shows an example chat application using Redux and Angular 2. The goal is to show how to use the Redux data architecture pattern within Angular 2, using the core Redux library. It also features:

You can see that in the constructor we inject our Store (which is typed to AppState). We immediately subscribe to any changes in the store. This callback will not be called unless an action is dispatched to the store, so we need to make sure we load the initial data. To do this, we call this.updateState() one time after the subscription.

updateState reads the state from the store (this.store.getState()) and then calls the selector functiongetUnreadMessagesCount (you can find the implementation of that here). getUnreadMessagesCount calculates the number of unread messages. We then take that value and set it to this.unreadMessagesCount. Because unreadMessagesCount is an instance variable which appears in the template, Angular will rerender this component when the value changes.

This pattern is used throughout the app.

Understanding how everything fits together with Redux can be tricky, but this code is heavily commented. One strategy to understand this code is to start at the components and see how they read the Store with selectors, dispatch actions, and follow that through the reducers. The other strategy is to get a copy of ng-book 2 where we explain each line in detail over ~60 pages.

ThreadsState stores the list of Threads indexed by id in entities, as well as a complete list of the ids in ids.

We also store the id of the current thread so that we know what the user is currently looking at - this is valuable for the unread messages count, for instance.

In this app, we store the Messages in their respective Thread and we don't store the Messages apart from that Thread. In your app you may find it useful to separate Messages into their own Messages reducer and keep only a list of Message ids in your Threads.

Running the App

Running the Tests

You can run the unit tests with:

npm run test

Build Redux in TypeScript Tutorial

This repository contains a step-by-step tutorial on how to build a minimal-redux store in Typescript. You can read a blog post explaining this code here. You can also find the code in minimal/tutorial. The final result looks like this (with or without Observables):

Minimal Angular 2 Redux Integration

This repository also contains an example of a minimal integration of Redux with Angular 2 to build a counter app. You can also read about how to build this project here at the ng-book blog.

Series

This repo is part of a series of projects that discuss data architecture with Angular 2. You can find this same project implemented with Observable streams instead of Redux here: