Working React+Redux template

templates/ReactReduxSpa/ClientApp/store/Counter.ts

@@ -0,0 +1,40 @@
+import { typeName, isActionType, Action, Reducer } from 'redux-typed';
+import { ActionCreator } from './';
+
+// -----------------
+// STATE - This defines the type of data maintained in the Redux store.
+
+export interface CounterState {
+    count: number;
+}
+
+// -----------------
+// 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("INCREMENT_COUNT")
+class IncrementCount extends Action {
+}
+
+// ----------------
+// 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 = {
+    increment: (): ActionCreator => (dispatch, getState) => {
+        dispatch(new IncrementCount());
+    }
+};
+
+// ----------------
+// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.
+export const reducer: Reducer<CounterState> = (state, action) => {
+    if (isActionType(action, IncrementCount)) {
+        return { count: state.count + 1 };
+    }
+    
+    // For unrecognized actions (or in cases where actions have no effect), must return the existing state
+    //  (or default initial state if none was supplied)
+    return state || { count: 0 };
+};

templates/ReactReduxSpa/ClientApp/store/WeatherForecasts.ts

@@ -0,0 +1,76 @@
+import { fetch } from 'domain-task/fetch';
+import { typeName, isActionType, Action, Reducer } from 'redux-typed';
+import { ActionCreator } from './';
+
+// -----------------
+// STATE - This defines the type of data maintained in the Redux store.
+
+export interface WeatherForecastsState {
+    isLoading: boolean;
+    startDateIndex: number;
+    forecasts: WeatherForecast[];
+}
+
+export interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: 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_WEATHER_FORECASTS")
+class RequestWeatherForecasts extends Action {
+    constructor(public startDateIndex: number) {
+        super();
+    }
+}
+
+@typeName("RECEIVE_WEATHER_FORECASTS")
+class ReceiveWeatherForecasts extends Action {
+    constructor(public startDateIndex: number, public forecasts: WeatherForecast[]) {
+        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 = {
+    requestWeatherForecasts: (startDateIndex: number): ActionCreator => (dispatch, getState) => {
+        // Only load data if it's something we don't already have (and are not already loading)
+        if (startDateIndex !== getState().weatherForecasts.startDateIndex) {
+            fetch(`/api/SampleData/WeatherForecasts?startDateIndex=${ startDateIndex }`)
+                .then(response => response.json())
+                .then((data: WeatherForecast[]) => {
+                    dispatch(new ReceiveWeatherForecasts(startDateIndex, data));
+                });
+
+            dispatch(new RequestWeatherForecasts(startDateIndex));
+        }
+    }
+};
+
+// ----------------
+// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.
+const unloadedState: WeatherForecastsState = { startDateIndex: null, forecasts: [], isLoading: false };
+export const reducer: Reducer<WeatherForecastsState> = (state, action) => {
+    if (isActionType(action, RequestWeatherForecasts)) {
+        return { startDateIndex: action.startDateIndex, isLoading: true, forecasts: state.forecasts };
+    } else if (isActionType(action, ReceiveWeatherForecasts)) {
+        // Only accept the incoming data if it matches the most recent request. This ensures we correctly
+        // handle out-of-order responses.
+        if (action.startDateIndex === state.startDateIndex) {
+            return { startDateIndex: action.startDateIndex, forecasts: action.forecasts, isLoading: false };
+        }
+    }
+    
+    // For unrecognized actions (or in cases where actions have no effect), must return the existing state
+    // (or default initial state if none was supplied)
+    return state || unloadedState;
+};

templates/ReactReduxSpa/ClientApp/store/index.ts

@@ -0,0 +1,21 @@
+import { ActionCreatorGeneric } from 'redux-typed';
+import * as WeatherForecasts from './WeatherForecasts';
+import * as Counter from './Counter';
+
+// The top-level state object
+export interface ApplicationState {
+    counter: Counter.CounterState,
+    weatherForecasts: WeatherForecasts.WeatherForecastsState
+}
+
+// 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 = {
+    counter: Counter.reducer,
+    weatherForecasts: WeatherForecasts.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>;