NGXF
  • 🚀Introduction
  • Get Started
    • Why
    • Installation
  • Concepts
    • Introduction
  • Features
    • Activated Route
    • Call
    • Init
    • Lazy
    • Keep Alive
    • Timeout
    • Track By Key
    • Repeat
    • Virtual Scroll
  • Server Interaction
    • Async
    • Cookies
    • Http
    • Socket.IO
  • Hooks
    • State Hook
    • Effect Hook
    • Reducer Hook
  • Recompose
    • Compose
  • API
    • NgxfModule
    • HttpDirective
    • RouteDirective
    • InitDirective
    • ComposeDirective
    • ReturnDirective
    • TimeoutDirective
    • CookiesDirective
    • AsyncDirective
    • LazyDirective
    • CallPipe
  • Recipes
    • Caching
    • Style Guide
  • Community
    • FAQ
    • Contributing
Powered by GitBook
On this page
  • ⚡️Reducer Hook in Template
  • ⚡️Reducer Hook with Ivy
  1. Hooks

Reducer Hook

It is how useReducer hook would look in Angular.

⚡️Reducer Hook in Template

An example in COMPONENT.component.ts.

@Component({
  selector: 'app-use-reducer',
  templateUrl: './use-reducer.component.html'
})
export class UseReducerComponent implements OnInit {

  initialAction = {
    type: 'reset',
    payload: 100
  };

  defaultState = {
    count: 0
  };

  reducer = (state, action) => {
    switch (action.type) {
      case 'reset':
        return { count: action.payload };
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        // A reducer must always return a valid state.
        // Alternatively you can throw an error if an invalid action is dispatched.
        return state;
    }
  }

}

An example in COMPONENT.template.html.

<ng-container *useReducer="
  let store init reducer
            with defaultState
            and initialAction">
	Count: {{ store.state.count }}
	<button (click)="store.dispatch({ type: 'reset', payload: 0 })">
    Reset 🔥
  </button>
  <button (click)="store.dispatch({ type: 'increment' })">
    Increment 🔥
  </button>
  <button (click)="store.dispatch({ type: 'decrement' })">
    Decrement 🔥
  </button>
</ng-container>

⚡️Reducer Hook with Ivy

An example in COMPONENT.component.ts.

function reducer(state, action) {
  switch (action.type) {
    case 'reset':
      return { count: action.payload };
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      // A reducer must always return a valid state.
      // Alternatively you can throw an error if an invalid action is dispatched.
      return state;
  }
}

@Component({
  selector: 'app-use-reducer',
  template: `
    Count: {{ state.count }}
    <button (click)="dispatch({ type: 'reset', payload: 0 })">
      Reset 🔥
    </button>
    <button (click)="dispatch({ type: 'increment' })">
      Increment 🔥
    </button>
    <button (click)="dispatch({ type: 'decrement' })">
      Decrement 🔥
    </button>
  `
})
@UseReducer(['state', 'dispatch'], reducer, { count: 0 })
class Host {}
PreviousEffect HookNextCompose

Last updated 6 years ago