I need to create a custom state that will contain data that are children of a parent state and for this I will create a reducer for each child state.

I want to create the child reducers using @ngrx/entity so that it works correctly with angularfire2 stateChanges() link here.

I have chosen to do this, because I will have many records and so that I have a better performance and can search for the key.

I just do not know how to structure this with Ngrx and I would like to structure the data as follows:

index.ts

export interface AppState {
    router: any;
    auth: Auth,
    contacts: ContactState,
    users: UsersState,
    config: ConfigState
};

export const reducers: ActionReducerMap<AppState> = {
    router: routerReducer,
    auth: authReducer,
    contacts: contactsReducer,
    users: usersReducer,
    config: configReducer,
    // Is not this allowed here? How can I structure this way?
    handbooks: {
        handbook: handbookReducer, // ids: [...] entities [...] <- can have 1k 
        anamnesis: anamnesisReducer, // ids: [...] entities [...] <- can have 1k 
        exams: examsReducer, // ids: [...] entities [...] <- can have 1k 
        ducts: ductsReducer, // ids: [...] entities [...] <- can have 1k
        // ... others
   }
};

reducer.ts

export const customAdapter = createEntityAdapter<any>();
export interface CustomState extends EntityState<any> { }
export const initialState: CustomState = customAdapter.getInitialState(null);

export function customReducer(
    state: CustomState = initialState,
    action: Action) {

    switch (action.type) {

        case actions.ADDED:
            return customAdapter.addOne(action.payload, state)

        case actions.MODIFIED:
            return customAdapter.updateOne({
                id: action.payload.id,
                changes: action.payload
            }, state)

        case actions.REMOVED:
            return customAdapter.removeOne(action.payload.id, state)

        default:
            return state;
    }

}

I need to structure according to the logic above, I will have a reducer for each child state, so that I can get better performance in the future.

How can I structure child reducers with ActionMapReducer? So that I can change the status of each child individually without having to change the whole state.

0 Answers