Beginning React+Redux "Music Store" sample

samples/react/MusicStore/ReactApp/store/AlbumDetails.ts

@@ -0,0 +1,72 @@
+import fetch from 'isomorphic-fetch';
+import { typeName, isActionType, Action, Reducer } from '../TypedRedux';
+import { ActionCreator } from './';
+import { Genre } from './GenreList';
+
+// -----------------
+// STATE - This defines the type of data maintained in the Redux store.
+
+export interface AlbumDetailsState {
+    isLoaded: boolean;
+    album: AlbumDetails;
+}
+
+export interface AlbumDetails {
+    AlbumId: string;
+    Title: string;
+    AlbumArtUrl: string;
+    Genre: Genre;
+    Artist: Artist;
+    Price: number;
+}
+
+interface Artist {
+    Name: string;
+}
+
+// -----------------
+// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.
+// They do not themselves have any side-effects; they just describe something that is going to happen.
+// Use @typeName and isActionType for type detection that works even after serialization/deserialization.
+
+@typeName("REQUEST_ALBUM_DETAILS")
+class RequestAlbumDetails extends Action {
+    constructor(public albumId: number) {
+        super();
+    }
+}
+
+@typeName("RECEIVE_ALBUM_DETAILS")
+class ReceiveAlbumDetails extends Action {
+    constructor(public album: AlbumDetails) {
+        super();
+    }
+}
+
+// ----------------
+// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.
+// They don't directly mutate state, but they can have external side-effects (such as loading data).
+
+export const actionCreators = {    
+    requestAlbumDetails: (albumId: number): ActionCreator => (dispatch, getState) => {
+        fetch(`/api/albums/${ albumId }`)
+            .then(results => results.json())
+            .then(album => dispatch(new ReceiveAlbumDetails(album)));
+        
+        dispatch(new RequestAlbumDetails(albumId));
+    }
+};
+
+// ----------------
+// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.
+// For unrecognized actions, must return the existing state (or default initial state if none was supplied).
+const unloadedState: AlbumDetailsState = { isLoaded: false, album: null };
+export const reducer: Reducer<AlbumDetailsState> = (state, action) => {
+    if (isActionType(action, RequestAlbumDetails)) {
+        return unloadedState;
+    } else if (isActionType(action, ReceiveAlbumDetails)) {
+        return { isLoaded: true, album: action.album };
+    } else {
+        return state || unloadedState;
+    }
+};

samples/react/MusicStore/ReactApp/store/FeaturedAlbums.ts

@@ -0,0 +1,58 @@
+import fetch from 'isomorphic-fetch';
+import { typeName, isActionType, Action, Reducer } from '../TypedRedux';
+import { ActionCreator } from './';
+
+// -----------------
+// STATE - This defines the type of data maintained in the Redux store.
+
+export interface FeaturedAlbumsState {
+    albums: Album[];
+}
+
+export interface Album {
+    AlbumId: number;
+    Title: string;
+    AlbumArtUrl: string;
+}
+
+// -----------------
+// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.
+// They do not themselves have any side-effects; they just describe something that is going to happen.
+// Use @typeName and isActionType for type detection that works even after serialization/deserialization.
+
+@typeName("REQUEST_FEATURED_ALBUMS")
+class RequestFeaturedAlbums extends Action {
+}
+
+@typeName("RECEIVE_FEATURED_ALBUMS")
+class ReceiveFeaturedAlbums extends Action {
+    constructor(public albums: Album[]) {
+        super();
+    }
+}
+
+// ----------------
+// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.
+// They don't directly mutate state, but they can have external side-effects (such as loading data).
+
+export const actionCreators = {
+    requestFeaturedAlbums: (): ActionCreator => (dispatch, getState) => {
+        fetch('/api/albums/mostPopular')
+            .then(results => results.json())
+            .then(albums => dispatch(new ReceiveFeaturedAlbums(albums)));
+        
+        return dispatch(new RequestFeaturedAlbums());        
+    }
+};
+
+// ----------------
+// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.
+// For unrecognized actions, must return the existing state (or default initial state if none was supplied).
+
+export const reducer: Reducer<FeaturedAlbumsState> = (state, action) => {
+    if (isActionType(action, ReceiveFeaturedAlbums)) {
+        return { albums: action.albums };
+    } else {
+        return state || { albums: [] };
+    }
+};

samples/react/MusicStore/ReactApp/store/GenreDetails.ts

@@ -0,0 +1,59 @@
+import fetch from 'isomorphic-fetch';
+import { typeName, isActionType, Action, Reducer } from '../TypedRedux';
+import { ActionCreator } from './';
+import { Album } from './FeaturedAlbums';
+
+// -----------------
+// STATE - This defines the type of data maintained in the Redux store.
+
+export interface GenreDetailsState {
+    isLoaded: boolean;
+    albums: Album[];
+}
+
+// -----------------
+// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.
+// They do not themselves have any side-effects; they just describe something that is going to happen.
+// Use @typeName and isActionType for type detection that works even after serialization/deserialization.
+
+@typeName("REQUEST_GENRE_DETAILS")
+class RequestGenreDetails extends Action {
+    constructor(public genreId: number) {
+        super();
+    }
+}
+
+@typeName("RECEIVE_GENRE_DETAILS")
+class ReceiveGenreDetails extends Action {
+    constructor(public albums: Album[]) {
+        super();
+    }
+}
+
+// ----------------
+// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.
+// They don't directly mutate state, but they can have external side-effects (such as loading data).
+
+export const actionCreators = {    
+    requestGenreDetails: (genreId: number): ActionCreator => (dispatch, getState) => {
+        fetch(`/api/genres/${ genreId }/albums`)
+            .then(results => results.json())
+            .then(albums => dispatch(new ReceiveGenreDetails(albums)));
+        
+        dispatch(new RequestGenreDetails(genreId));
+    }
+};
+
+// ----------------
+// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.
+// For unrecognized actions, must return the existing state (or default initial state if none was supplied).
+const unloadedState: GenreDetailsState = { isLoaded: false, albums: [] };
+export const reducer: Reducer<GenreDetailsState> = (state, action) => {
+    if (isActionType(action, RequestGenreDetails)) {
+        return unloadedState;
+    } else if (isActionType(action, ReceiveGenreDetails)) {
+        return { isLoaded: true, albums: action.albums };
+    } else {
+        return state || unloadedState;
+    }
+};

samples/react/MusicStore/ReactApp/store/GenreList.ts

@@ -0,0 +1,51 @@
+import fetch from 'isomorphic-fetch';
+import { typeName, isActionType, Action, Reducer } from '../TypedRedux';
+import { ActionCreator } from './';
+
+// -----------------
+// STATE - This defines the type of data maintained in the Redux store.
+
+export interface GenresListState {
+    genres: Genre[];
+}
+
+export interface Genre {
+    GenreId: string;
+    Name: string;
+}
+
+// -----------------
+// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.
+// They do not themselves have any side-effects; they just describe something that is going to happen.
+// Use @typeName and isActionType for type detection that works even after serialization/deserialization.
+
+@typeName("RECEIVE_GENRES_LIST")
+class ReceiveGenresList extends Action {
+    constructor(public genres: Genre[]) {
+        super();
+    }
+}
+
+// ----------------
+// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.
+// They don't directly mutate state, but they can have external side-effects (such as loading data).
+
+export const actionCreators = {    
+    requestGenresList: (): ActionCreator => (dispatch, getState) => {
+        fetch('/api/genres')
+            .then(results => results.json())
+            .then(genres => dispatch(new ReceiveGenresList(genres)));
+    }
+};
+
+// ----------------
+// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.
+// For unrecognized actions, must return the existing state (or default initial state if none was supplied).
+
+export const reducer: Reducer<GenresListState> = (state, action) => {
+    if (isActionType(action, ReceiveGenresList)) {
+        return { genres: action.genres };
+    } else {
+        return state || { genres: [] };
+    }
+};

samples/react/MusicStore/ReactApp/store/index.ts

@@ -0,0 +1,27 @@
+import { ActionCreatorGeneric } from '../TypedRedux';
+import * as FeaturedAlbums from './FeaturedAlbums';
+import * as GenreList from './GenreList';
+import * as GenreDetails from './GenreDetails';
+import * as AlbumDetails from './AlbumDetails';
+
+// The top-level state object
+export interface ApplicationState {
+    featuredAlbums: FeaturedAlbums.FeaturedAlbumsState;
+    genreList: GenreList.GenresListState,
+    genreDetails: GenreDetails.GenreDetailsState,
+    albumDetails: AlbumDetails.AlbumDetailsState
+}
+
+// Whenever an action is dispatched, Redux will update each top-level application state property using
+// the reducer with the matching name. It's important that the names match exactly, and that the reducer
+// acts on the corresponding ApplicationState property type.
+export const reducers = {
+    featuredAlbums: FeaturedAlbums.reducer,
+    genreList: GenreList.reducer,
+    genreDetails: GenreDetails.reducer,
+    albumDetails: AlbumDetails.reducer
+};
+
+// This type can be used as a hint on action creators so that its 'dispatch' and 'getState' params are
+// correctly typed to match your store. 
+export type ActionCreator = ActionCreatorGeneric<ApplicationState>;