|
| 1 | +# Actions |
| 2 | + |
| 3 | +## What are Actions? |
| 4 | + |
| 5 | +`Actions` are the most simple core concept of NgRx (and Redux in general). Action is a unique event that is used to trigger a change in the state. What does it mean? For example, we might have an action that says "Home page has been loaded". It might mean some changes in the state. For example, in our application, it might trigger an API call for lists of expenses and incomes, which will in turn trigger an event that outs that data in the `Store`, resulting ina change in the UI. Or we might have an action that says "Add a category", which will create a new category of income/expense in the `Store`, again resulting in a UI change. Again, essentially `Actions` are like commands to the `Store`, or methods that allow to update its contents. |
| 6 | + |
| 7 | +## What does an Action look like? |
| 8 | + |
| 9 | +Actions are simple. An action is usually an object with just two properties: a `type`, a string that indicates what *exactly* that action represents, and an optional `payload` that is kind of like a function argument. In our example, an action that adds a category might look like this: |
| 10 | + |
| 11 | +```ts |
| 12 | +const addCategoryAction = { |
| 13 | + type: '[Categories List] Add Category', |
| 14 | + payload: {name: 'Food'}, |
| 15 | +}; |
| 16 | +``` |
| 17 | + |
| 18 | +This is an action that adds a category named `Food` to the list of all categories. Of course, we still haven't written the logic that actually uses this action to put the data in the store, but for now we are focusing on the `Actions`. In NgRx, there is a simpler, built-in way of creating `Actions`, namely the `createAction` function. To start learning about it, let's create a folder names `state` in our `src/app` directory, and a file called `actions.ts` inside it. Now, let's put this code inside that file: |
| 19 | + |
| 20 | +```ts |
| 21 | +// src/app/state/actions.ts |
| 22 | +import { createAction, props } from '@ngrx/store'; |
| 23 | + |
| 24 | +export const addCategory = createAction( |
| 25 | + '[Category List] Add Category', |
| 26 | + props<{name: string}>(), |
| 27 | +); |
| 28 | +``` |
| 29 | + |
| 30 | +Let's break down this example. First of all, the name `createAction` is a bit deceptive; it does not create an action; in fact, it creates a function which, when called, wil produce an action object. The first argument is the `type` of the action that will be produced. When called, the `addCategory` function will **always** create an action with type "[Category List] Create Category". The second argument uses the bizarre function `props`, which is a generic function that allows us to define the type of the `payload` which the created action will have. Essentially, it explains that in order to create the action using the `addCategory` function, we should call it and provide an object that has a property `name` which is a `string`. Let's do this and `console.log` the result. |
| 31 | + |
| 32 | +```ts |
| 33 | +// src/app/app.component.ts |
| 34 | +import { Component, OnInit } from '@angular/core'; |
| 35 | + |
| 36 | +import { addCategory } from './state/actions.ts'; |
| 37 | + |
| 38 | +@Component({ |
| 39 | + // component boilerplate omitted for the sake of brevity |
| 40 | +}) |
| 41 | +export class AppComponent implements OnInit { |
| 42 | + ngOnInit() { |
| 43 | + console.log(addCategory({name: 'Food'})); |
| 44 | + } |
| 45 | +} |
| 46 | +``` |
| 47 | + |
| 48 | +In the console, we will see the following: |
| 49 | + |
| 50 | +```js |
| 51 | +{type: '[Category List] Add Category', payload: {name: 'Food'}} |
| 52 | +``` |
| 53 | + |
| 54 | +So essentially, `createAction` provided us with an easy way of creating actions of the same type. `addCategory` in our case is an `ActionCreator`, a function which produces an action object whenever called, and `props` explained what argument that `ActionCreator` function expects. |
| 55 | + |
| 56 | +### Homework |
| 57 | + |
| 58 | +Yes, you've read it correctly: we have learned how to write some basic code in NgRx, so it is time for some homework! |
| 59 | +*For this homework, assume categories cannot have duplicate names. We will deal with this problem later* |
| 60 | + |
| 61 | +1. Create an action for deleting a category. It should receive a string with the name of the category, and in the next chapter we will use that code to write the actual logic for deleting the category. |
| 62 | +2. Create an action for updating a category. It must receive a `Category` object (`{name: string}`), and again, we will right the code to update the category in the next chapter |
| 63 | + |
| 64 | +> **Important!** Do not move to the next chapter without adding the homework code! We will be using that code in the next chapters |
| 65 | +
|
| 66 | +Example of a solution to the homework: |
| 67 | + |
| 68 | +>! 1. const deleteCategory = createAction('[Category List] Delete Category, props<string>()'); |
| 69 | +>! 2. const updateCategory = createAction('[Category List] Update Category', props<{name: string}>()); |
| 70 | +
|
| 71 | +In this chapter, we learned how to create `Actions`, unique events that specify what should happen to the state. In the next one, we will be writing code that actually does the transformation in the state. |
0 commit comments