@ngrx/store#on TypeScript Examples

_fileExplorerReducer = createReducer(initialState,
  on(loadApplications, (state, {applications}) => ({
    ...state, applications
  })),
  on(loadFiles, (state, {files}) => ({...state, files})),
  on(loadItems, (state, {path}) => {
    const currentPathItems = [];
    return {...state, currentPath: fs.getPath(path), currentPathItems};
  }),
  on(setCurrentPath, (state, {path}) => ({
    ...state, currentPath: fs.getPath(path)
  })),
  on(resetFileExplorer, (state) => ({
    ...state, currentPath: initialState.currentPath, currentPathItems: initialState.currentPathItems
  })))

navigationReducer = createReducer(
  initialState,
  on(routerRequestAction, (state) => ({
    ...state,
    loading: true,
  })),
  on(routerNavigatedAction, routerErrorAction, routerCancelAction, (state) => ({
    ...state,
    loading: false,
  }))
)

reducer = createReducer(
  initialState,
  on(
    actionSettingsChangeLanguage,
    actionSettingsChangeTheme,
    actionSettingsChangeAutoNightMode,
    actionSettingsChangeStickyHeader,
    actionSettingsChangeAnimationsPage,
    actionSettingsChangeAnimationsElements,
    actionSettingsChangeHour,
    (state, action) => ({ ...state, ...action })
  ),
  on(
    actionSettingsChangeAnimationsPageDisabled,
    (state, { pageAnimationsDisabled }) => ({
      ...state,
      pageAnimationsDisabled,
      pageAnimations: false
    })
  )
)

scoreboardReducer = createReducer(
  initialState,
  on(ScoreboardPageActions.homeScore, (state) => ({
    ...state,
    home: state.home + 1,
  })),
  on(ScoreboardPageActions.awayScore, (state) => ({
    ...state,
    away: state.away + 1,
  })),
  on(ScoreboardPageActions.resetScore, () => ({ home: 0, away: 0 }))
)

counterReducer = createReducer(
  initialState,
  on(CounterActions.incrementCount, (state) => ({
    ...state,
    count: state.count + 1,
  })),
  on(CounterActions.decrementCount, (state) => ({
    ...state,
    count: state.count - 1,
  }))
)

mdViewReducer = createReducer(
  initialMdviewState,
  on(MdViewActions.loadFullMetadata, (state) => ({
    ...state,
    loadingFull: true,
  })),
  on(MdViewActions.setIncompleteMetadata, (state, { incomplete }) => ({
    ...state,
    metadata: incomplete,
  })),
  on(MdViewActions.loadFullSuccess, (state, { full }) => ({
    ...state,
    metadata: full,
    loadingFull: false,
  })),
  on(MdViewActions.loadFullFailure, (state, { error }) => ({
    ...state,
    error,
    loadingFull: false,
  })),
  on(MdViewActions.setRelated, (state, { related }) => ({
    ...state,
    related,
  })),
  on(MdViewActions.close, (state) => {
    // eslint-disable-next-line
    const { metadata, related, ...stateWithoutMd } = state
    return stateWithoutMd
  })
)

settingsReducer = createReducer(initialState,

  /**  Load User Profile Settings Reducers  **/
  on(loadUserSettings, (state) => ({
    ...state, loading: true, loaded: false, error: undefined
  })),

  on(loadUserSettingsSuccess, (state, { user }) => ({ ...state,
    user: { ...user, loading: false, loaded: true, error: undefined },
    loading: false, loaded: true, error: undefined
  })),

  on(loadUserSettingsFailure, (state, { error }) => ({
    ...state, error, loading: false, loaded: true,
  })),


  /**  Edit User Profile Settings Reducers  **/
  on(editUserSettings, (state) => ({ ...state,
    savingChanges: true, error: undefined
  })),

  on(editUserSettingsSuccess, (state, { user }) => ({
    ...state, user, savingChanges: false
  })),

  on(editUserSettingsFailure, (state, { error }) => ({
    ...state, error, savingChanges: false
  })),

  on(changeUserImageLocally, (state, { photoUrl }) => ({
    ...state, user: { ...state.user, photoUrl }
  }))

)

reducer = createReducer(
  initialState,
  on(actionStockMarketRetrieve, (state, { symbol }) => ({
    ...state,
    loading: true,
    stock: null,
    error: null,
    symbol
  })),
  on(actionStockMarketRetrieveSuccess, (state, { stock }) => ({
    ...state,
    loading: false,
    stock,
    error: null
  })),
  on(actionStockMarketRetrieveError, (state, { error }) => ({
    ...state,
    loading: false,
    stock: null,
    error
  }))
)

reducer = createReducer(
  initialState,
  on(todoAction.actionTodosAdd, (state, todo) => ({
    ...state,
    items: [
      {
        id: todo.id,
        name: todo.name,
        done: false
      },
      ...state.items
    ]
  })),
  on(todoAction.actionTodosToggle, (state, todo) => ({
    ...state,
    items: state.items.map((item: Todo) =>
      item.id === todo.id ? { ...item, done: !item.done } : item
    )
  })),
  on(todoAction.actionTodosRemoveDone, (state, todo) => ({
    ...state,
    items: state.items.filter((item: Todo) => !item.done)
  })),
  on(todoAction.actionTodosFilter, (state, todo) => ({
    ...state,
    filter: todo.filter
  }))
)

reducer = createReducer(
  initialState,
  on(FindBookPageActions.searchBooks, (state, { query }) => {
    return query === ''
      ? {
          ids: [],
          loading: false,
          error: '',
          query,
        }
      : {
          ...state,
          loading: true,
          error: '',
          query,
        };
  }),
  on(BooksApiActions.searchSuccess, (state, { books }) => ({
    ids: books.map((book) => book.id),
    loading: false,
    error: '',
    query: state.query,
  })),
  on(BooksApiActions.searchFailure, (state, { errorMsg }) => ({
    ...state,
    loading: false,
    error: errorMsg,
  }))
)

tradeLogsReducer = createReducer(
  initialState,
  on(addTradeLogs, (state, { tradeLogs }) =>
    adapter.upsertMany(tradeLogs, {
      ...state,
    })
  ),
  on(updateFilter, (state, { filter }) => ({
    ...state,
    filter,
  })),
  on(updateGroupSettings, (state, { groupSettings }) => ({
    ...state,
    groupSettings,
  })),
  on(updatePortfolioSize, (state, { portfolioSize }) => ({
    ...state,
    portfolioSize,
  })),
  on(addPositions, (state, { alias, positions }) => ({
    ...state,
    positions: [
      ...state.positions.filter((pos) => pos.alias !== alias),
      ...positions,
    ].sort((a, b) => a.name.localeCompare(b.name)),
    positionsLoaded: true,
  })),
  on(clearPositions, (state) => ({
    ...state,
    positions: [],
    positionsLoaded: false,
  }))
)

reducer = createReducer(
  initialState,
  /**
   * The addMany function provided by the created adapter
   * adds many records to the entity dictionary
   * and returns a new state including those records. If
   * the collection is to be sorted, the adapter will
   * sort each record upon entry into the sorted array.
   */
  on(
    BooksApiActions.searchSuccess,
    CollectionApiActions.loadBooksSuccess,
    (state, { books }) => adapter.addMany(books, state)
  ),
  /**
   * The addOne function provided by the created adapter
   * adds one record to the entity dictionary
   * and returns a new state including that records if it doesn't
   * exist already. If the collection is to be sorted, the adapter will
   * insert the new record into the sorted array.
   */
  on(BookActions.loadBook, (state, { book }) => adapter.addOne(book, state)),
  on(ViewBookPageActions.selectBook, (state, { id }) => ({
    ...state,
    selectedBookId: id,
  }))
)

reducer = createReducer(
  initialState,
  on(LoginPageActions.login, (state) => ({
    ...state,
    error: null,
    pending: true,
  })),

  on(AuthApiActions.loginSuccess, (state) => ({
    ...state,
    error: null,
    pending: false,
  })),
  on(AuthApiActions.loginFailure, (state, { error }) => ({
    ...state,
    error,
    pending: false,
  }))
)

reducer = createReducer(
  initialState,

  on(CurrentUserActions.loadCurrentUser, state => {
    return {
      ...state,
      error: null,
      loading: true,
    };
  }),
  on(CurrentUserActions.loadCurrentUserSuccess, (state, action) => {
    return {
      ...state,
      loading: false,
      profile: action.data,
    };
  }),
  on(CurrentUserActions.loadCurrentUserFailure, (state, action) => {
    return {
      ...state,
      error: action.error,
      loading: false,
    };
  }),
  on(CurrentUserActions.loadCurrentUserAfterLoginSuccess, (state, action) => {
    return {
      ...state,
      profile: action.data,
    };
  })
)

AuthReducer = createReducer(
  initialAuthState,
  on(setUserDetail, (state: AuthState, { userDetail }) => ({
    ...state,
    userDetail: userDetail,
  })),
  on(deleteUserDetail, (state: AuthState) => ({
    ...state,
    userDetail: undefined,
  }))
)

usersReducer = createReducer(
  usersInitialState,
  on(UserActions.loadUserRun, state => ({
    ...state,
    userLoadRun: true,
    userLoadFailure: null,
  })),
  on(UserActions.loadUserSuccess, (state, {payload}) => ({
    ...state,
    user: payload,
    userLoadRun: false,
  })),
  on(UserActions.loadUserFailure, (state, {payload}) => ({
    ...state,
    userLoadRun: false,
    userLoadFailure: payload,
  })),
)

authReducer = createReducer(
  authInitialState,
  on(AuthActions.signInSet, (state, {payload}) => ({...state, signIn: payload})),
  on(AuthActions.signInClear, state => ({...state, signIn: null})),
  on(AuthActions.signInRun, state => ({...state, signInRun: true, signInError: null})),
  on(AuthActions.signInFailure, (state, {payload}) => ({...state, signInError: payload, signInRun: false})),
  on(AuthActions.signInSuccess, (state) => ({...state, signInRun: false, signInError: null})),
  on(AuthActions.signOutRun, state => ({...state, signOutRun: true, signOutError: null})),
  on(AuthActions.signOutSuccess, state => ({...state, signOutRun: false, signOutError: null})),
  on(AuthActions.signOutFailure, (state, {payload}) => ({...state, signOutRun: false, signOutError: payload})),
)

appReducer = createReducer(
  initialState,
  on(AppActions.addItemToBucket, (state, action) => ({ ...state, bucket: [action.fruit, ...state.bucket] })),
  on(AppActions.removeItemFromBucket, (state, action) => {
    return {
      ...state,
      bucket: state.bucket.filter(bucketItem => {
        return bucketItem.id !== action.fruit.id;
      }) }
  }),
)

loginReducer = createReducer(
  initialState,

  on(LoginActions.login, state => {
    return {
      ...state,
      error: null,
      loading: true,
    };
  }),
  on(LoginActions.loginSuccess, (state) => {
    return {
      ...state,
      loading: false,
    };
  }),
  on(LoginActions.loginFailure, (state, action) => {
    return {
      ...state,
      error: action.error,
      loading: false,
    };
  })
)

reducer: ActionReducer<CommonDataStoreState, Action> =
    createReducer(
        INIT_COMMON_DATA_STORE_STATE,
        on(
            actions.setKernelStatsDataAction,
            (state: CommonDataStoreState, action: ActionCreatorAny) => {
              return {
                ...state,
                kernelStatsData: action.kernelStatsData,
              };
            },
            ),
    )

appReducer = createReducer(
  initialState,
  on(AppActions.addItemToBucket, (state, fruit) => ({
    ...state,
    bucket: [fruit, ...state.bucket],
  })),
  on(AppActions.removeItemFromBucket, (state, fruit) => {
    return {
      ...state,
      bucket: state.bucket.filter((bucketItem) => {
        return bucketItem.id !== fruit.id;
      }),
    };
  })
)

reducer = createReducer(
  initialState,
  on(actionFormUpdate, (state, { form }) => ({ ...state, form })),
  on(actionFormReset, () => initialState)
)

reducer = createReducer(
  initialState,
  on(actionBooksUpsertOne, (state, { book }) =>
    bookAdapter.upsertOne(book, state)
  ),
  on(actionBooksDeleteOne, (state, { id }) => bookAdapter.removeOne(id, state))
)

reducer: ActionReducer<TensorflowStatsState, Action> =
    createReducer(
        INIT_TENSORFLOW_STATS_STATE,
        on(
            actions.setDataAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                data: action.data,
              };
            },
            ),
        on(
            actions.setDiffDataAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                diffData: action.diffData,
              };
            },
            ),
        on(
            actions.setHasDiffAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                hasDiff: action.hasDiff,
              };
            },
            ),
        on(
            actions.setShowPprofLinkAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                showPprofLink: action.showPprofLink,
              };
            },
            ),
        on(
            actions.setShowFlopRateChartAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                showFlopRateChart: action.showFlopRateChart,
              };
            },
            ),
        on(
            actions.setShowModelPropertiesAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                showModelProperties: action.showModelProperties,
              };
            },
            ),
        on(
            actions.setTitleAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                title: action.title,
              };
            },
            ),
    )

reducer = createReducer(
  initialState,
  on(authLogin, (state) => ({ ...state, isAuthenticated: true })),
  on(authLogout, (state) => ({ ...state, isAuthenticated: false }))
)

reducer = createReducer(
  initialState,
  on(actions.connectWallet, (state) => ({
    ...state,
    busy: {
      ...state.busy,
      connectedWallet: true,
    },
  })),
  on(actions.connectWalletSuccess, (state, { accountInfo }) => ({
    ...state,
    connectedWallet: accountInfo,
    busy: {
      ...state.busy,
      connectedWallet: false,
    },
  })),
  on(actions.connectWalletFailure, (state) => ({
    ...state,
    busy: {
      ...state.busy,
      connectedWallet: false,
    },
  })),
  on(actions.disconnectWallet, (state) => ({
    ...state,
    busy: {
      ...state.busy,
      connectedWallet: true,
    },
  })),
  on(actions.disconnectWalletSuccess, (state) => ({
    ...state,
    connectedWallet: undefined,
    busy: {
      ...state.busy,
      connectedWallet: false,
    },
  })),
  on(actions.disconnectWalletFailure, (state) => ({
    ...state,
    busy: {
      ...state.busy,
      connectedWallet: false,
    },
  }))
)

globalSpinnerReducer = createReducer(
    initialState,
    on(GlobalSpinnerActions.OnSpinner, () => true),
    on(GlobalSpinnerActions.OffSpinner, () => false),
  )

globalDialogReducer = createReducer(
    initialState,
    on(GlobalDialogActions.ProjectNotFound, (state, newState) => ({ ...state, ...newState})),
    on(GlobalDialogActions.ServerError, (state, newState) => ({ ...state, ...newState}))
)

globalConfigurationReducer = createReducer(
    initialState,
    on(GlobalConfigurationActions.OnComposeMode, (state) => ({ ...state, mode: 'compose'})),
    on(GlobalConfigurationActions.OnImportMode, (state) => ({ ...state, mode: 'import'})),
    on(GlobalConfigurationActions.OnRecipeLoadMode, (state) => ({ ...state, mode: 'recipe_load'}))
)