Working React+Redux template

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;
+};