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

Ensure data is only loaded if not already loaded (needed to keep client/server state consistent)

Browse Source
This commit is contained in:
SteveSandersonMS
2016-02-09 23:06:30 -08:00
parent 3a567823e8
commit a84688d65c
9 changed files with 69 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
samples/react/MusicStore/ReactApp/store/AlbumDetails.ts
View File

@@ -7,12 +7,12 @@ import { Genre } from './GenreList';
// STATE - This defines the type of data maintained in the Redux store.
export interface AlbumDetailsState {
isLoaded: boolean;
album: AlbumDetails;
requestedAlbumId: number;
}
export interface AlbumDetails {
AlbumId: string;
AlbumId: number;
Title: string;
AlbumArtUrl: string;
Genre: Genre;
@@ -49,23 +49,31 @@ class ReceiveAlbumDetails extends Action {
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));
// Only load if it's not already loaded (or currently being loaded)
if (albumId !== getState().albumDetails.requestedAlbumId) {
fetch(`/api/albums/${ albumId }`)
.then(results => results.json())
.then(album => {
// Only replace state if it's still the most recent request
if (albumId === getState().albumDetails.requestedAlbumId) {
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 };
const unloadedState: AlbumDetailsState = { requestedAlbumId: null as number, album: null };
export const reducer: Reducer<AlbumDetailsState> = (state, action) => {
if (isActionType(action, RequestAlbumDetails)) {
return unloadedState;
return { requestedAlbumId: action.albumId, album: null };
} else if (isActionType(action, ReceiveAlbumDetails)) {
return { isLoaded: true, album: action.album };
return { requestedAlbumId: action.album.AlbumId, album: action.album };
} else {
return state || unloadedState;
}