Sharing Top Content from the Angular-sphere.

πŸš€ Introducing NGRX-Actions – Actions and Reducer Utilities for NGRX – #ngrx #redux #angular #rx js

  • To get started, you define an action just like you do today for NGRX: – – then you create a class a decorate it with a decorator that contains the initial state for your reducer.
  • Within that class you define methods decorated with the decorator with an argument of the action class you want to match it on.
  • Thats because if it doesn’t see a state returned from the action it inspects whether the state was an object or array and automatically creates a new instance for you.
  • To hook it up to NGRX, all you have to do is call function passing your store.
  • If you want to use NGRX effects, I’ve created a lettable operator that will allow you to pass the action class as the argument like this:

ngrx-actions – Actions and Reducer Utilities for NGRX

The vote is over, but the fight for net neutrality isn’t. Show your support for a free and open internet.

GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.

Actions/reducer utility for NGRX. It provides 3 functions to make NGRX/redux more Angular-tastic.

Inspired by redux-act and redux-actions for Redux.

To get started, you define an action just like you do today for NGRX:

export class MyAction implements Action { readonly type = ‘My Action’; constructor(public payload : MyObj) {} }

decorator with an argument of the action class you want to match it on.

@Store({ collection: [], selections: [], loading: false }) export class MyStore { @Action(Load) load(state : MyState, action : Load) { state.loading = true; } @Action(LoadSuccess) loadSuccess(state : MyState, action : LoadSuccess) { state.collection = [… action.payload]; } @Action(Selection) selection(state : MyState, action : Selection) { state.collection = [… action.payload]; } @Action(DeleteSuccess) deleteSuccess(state : MyState, action : DeleteSuccess) { const idx = state.collection.findIndex(r => r.myId === action.payload); const collection = [… state.collection]; collection.splice(idx, 1); state.collection = collection; } }

You may notice, I don’t return the state. Thats because if it doesn’t see a state returned from the action it inspects whether the state was an object or array and automatically creates a new instance for you. If you are mutating deeply nested properties, you still need to…

GitHub