github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-26 03:27:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove 'redux-typed' from ReactReduxSpa template, making it more standard as a Redux application

Browse Source
This commit is contained in:
SteveSandersonMS
2016-11-11 15:32:51 -08:00
parent cdd6c16dc6
commit 9b048c54d4
10 changed files with 89 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
templates/ReactReduxSpa/ClientApp/store/Counter.ts
View File

@@ -1,5 +1,4 @@
import { typeName, isActionType, Action, Reducer } from 'redux-typed';
import { ActionCreator } from './';
import { Action, Reducer, ThunkAction } from 'redux';
// -----------------
// STATE - This defines the type of data maintained in the Redux store.
@@ -13,25 +12,34 @@ export interface CounterState {
// 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 {
}
interface IncrementCountAction { type: 'INCREMENT_COUNT' }
interface DecrementCountAction { type: 'DECREMENT_COUNT' }
// Declare a 'discriminated union' type. This guarantees that all references to 'type' properties contain one of the
// declared type strings (and not any other arbitrary string).
type KnownAction = IncrementCountAction | DecrementCountAction;
// ----------------
// 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());
}
increment: () => <IncrementCountAction>{ type: 'INCREMENT_COUNT' },
decrement: () => <DecrementCountAction>{ type: 'DECREMENT_COUNT' }
};
// ----------------
// 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 };
export const reducer: Reducer<CounterState> = (state: CounterState, action: KnownAction) => {
switch (action.type) {
case 'INCREMENT_COUNT':
return { count: state.count + 1 };
case 'DECREMENT_COUNT':
return { count: state.count - 1 };
default:
// The following line guarantees that every action in the KnownAction union has been covered by a case above
const exhaustiveCheck: never = action;
}
// For unrecognized actions (or in cases where actions have no effect), must return the existing state

69
templates/ReactReduxSpa/ClientApp/store/WeatherForecasts.ts
View File

@@ -1,6 +1,6 @@
import { fetch, addTask } from 'domain-task';
import { typeName, isActionType, Action, Reducer } from 'redux-typed';
import { ActionCreator } from './';
import { Action, Reducer, ThunkAction, ActionCreator } from 'redux';
import { AppThunkAction } from './';
// -----------------
// STATE - This defines the type of data maintained in the Redux store.
@@ -21,57 +21,70 @@ export interface WeatherForecast {
// -----------------
// 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();
}
interface RequestWeatherForecastsAction {
type: 'REQUEST_WEATHER_FORECASTS',
startDateIndex: number;
}
@typeName("RECEIVE_WEATHER_FORECASTS")
class ReceiveWeatherForecasts extends Action {
constructor(public startDateIndex: number, public forecasts: WeatherForecast[]) {
super();
}
interface ReceiveWeatherForecastsAction {
type: 'RECEIVE_WEATHER_FORECASTS',
startDateIndex: number;
forecasts: WeatherForecast[]
}
// Declare a 'discriminated union' type. This guarantees that all references to 'type' properties contain one of the
// declared type strings (and not any other arbitrary string).
type KnownAction = RequestWeatherForecastsAction | ReceiveWeatherForecastsAction;
// ----------------
// 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) => {
requestWeatherForecasts: (startDateIndex: number): AppThunkAction<KnownAction> => (dispatch, getState) => {
// Only load data if it's something we don't already have (and are not already loading)
if (startDateIndex !== getState().weatherForecasts.startDateIndex) {
let fetchTask = fetch(`/api/SampleData/WeatherForecasts?startDateIndex=${ startDateIndex }`)
.then(response => response.json())
.then((data: WeatherForecast[]) => {
dispatch(new ReceiveWeatherForecasts(startDateIndex, data));
dispatch({ type: 'RECEIVE_WEATHER_FORECASTS', startDateIndex: startDateIndex, forecasts: data });
});
addTask(fetchTask); // Ensure server-side prerendering waits for this to complete
dispatch(new RequestWeatherForecasts(startDateIndex));
dispatch({ type: 'REQUEST_WEATHER_FORECASTS', startDateIndex: 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 };
}
export const reducer: Reducer<WeatherForecastsState> = (state: WeatherForecastsState, action: KnownAction) => {
switch (action.type) {
case 'REQUEST_WEATHER_FORECASTS':
return {
startDateIndex: action.startDateIndex,
forecasts: state.forecasts,
isLoading: true
};
case 'RECEIVE_WEATHER_FORECASTS':
// 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
};
}
break;
default:
// The following line guarantees that every action in the KnownAction union has been covered by a case above
const exhaustiveCheck: never = action;
}
// 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;
};

5
templates/ReactReduxSpa/ClientApp/store/index.ts
View File

@@ -1,4 +1,3 @@
import { ActionCreatorGeneric } from 'redux-typed';
import * as WeatherForecasts from './WeatherForecasts';
import * as Counter from './Counter';
@@ -18,4 +17,6 @@ export const reducers = {
// 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>;
export interface AppThunkAction<TAction> {
(dispatch: (action: TAction) => void, getState: () => ApplicationState): void;
}