Software Setup
- @angular/cli version: ^9.1.2
System Details
- NodeJS Version: 14.15.1
- Typescript Version: 4.0.3
- Angular Version: 10.1.6
- @angular-redux/store version: ^11.0.0
- @angular/cli version (if applicable): 10.1.5
- OS: Windows 10
Expected Outcome:
In my codebase, I have defined various types and reducers which are essential for the application to function properly.
export type LookupNum<T> = { [id: number]: T };
//-- Normed model objects for store with string keys --//
export interface NormalizedObjectsStr<T> {
byId: LookupNum<T>;
allIds: number[];
}
//-- Normed model objects for store with numeric keys --//
export interface NormalizedObjectsNum<T> {
byId: { [id: number]: T };
allIds: number[];
}
//-- Client data models store on the client side --//
export interface ClientDataStore {
categories: NormalizedObjectsNum<Category>;
attributes: NormalizedObjectsNum<Attribute>;
}
// Application state definition
export interface IAppState {
entities?: ClientDataStore;
classfnAppState?: IClassfnAppState;
}
//-- Entity Reducers --//
const categoriesByIdReducer: Reducer<LookupNum<Category>, FluxStandardAction<Category | number>> = (state, action) => {
switch (action.type) {
default: { return state; }
}
}
const allCategoryIdsReducer: Reducer<number[], FluxStandardAction<Category | number>> = (state, action) => {
switch (action.type) {
default: {
return state;
}
}
}
const attributesByIdReducer: Reducer<LookupNum<Attribute>, FluxStandardAction<Category | number>> = (state, action) => {
switch (action.type) {
default: { return state; }
}
}
const allAttributesIdsReducer: Reducer<number[], FluxStandardAction<Attribute | number>> = (state, action) => {
switch (action.type) {
default: {
return state;
}
}
}
const categoriesReducer = combineReducers({
byId: categoriesByIdReducer,
allIds: allCategoryIdsReducer
});
const attributesReducer = combineReducers({
});
const entityReducer = combineReducers({
categories: categoriesReducer,
attributes: attributesReducer
});
//-- Creating Root Reducer --//
export default combineReducers({
entities: entityReducer,
classfnAppState: classfnRootReducer
});
When setting up the store using this method:
import appRootReducer from './reducers';
store.configureStore(
appRootReducer,
INITIAL_STATE,
[createLogger()],
devTools.isEnabled() ? [devTools.enhancer()] : []);
The expectation is that the setup should compile and run smoothly.
Current Behavior:
An error occurs during compilation stating that the reducer type is incorrect. The 'ClientDataStore' type seems to be missing, resulting in issues with combining multiple reducers across the state.
Error Details:
ERROR in src/app/classification/classification.component.ts(14,18): error TS2339: Property 'entities' does not exist on type 'IAppStateClassfn'. src/app/store/store.module.ts(33,13): error TS2345: Argument of type 'Reducer<{ entities: { categories: any; attributes: any; }; classfnAppState: IClassfnAppState; }, ...' is not assignable to parameter of type 'Reducer'. Types of parameters 'state' and 'state' are incompatible. Type 'IAppState' is not assignable to type '{ entities: { categories: any; attributes: any; }; classfnAppState: IClassfnAppState; }'. Property 'entities' is optional in type 'IAppState' but required in type '{ entities: { categories: any; attributes: any; }; classfnAppState: IClassfnAppState; }'.
Additional Information:
(optional)