Managing State in Angular Apps with ngrx/store and ngrx/effects (Part 2)

Recently I released a new state management pattern. You should check it out.

🚀 Introducing Akita: A New State Management Pattern for Angular Applications

In my previous article, we learned how to create the todos component and how to fetch them from the server.

In this part, we will learn how to create a new todo.

Remember that it is a continuation of the previous article. I will write here only the updates related to this section.

Build the AddTodo Component

The AddTodo component is just a dumb component that exposes:

1. add Output — emits an event with the title when the user clicks on the Add button.
2. reset Input — we want to reset the control when the ADD_TODO action completes.

Keep in mind that in real life you have at least to add some validation.

The smart component (AppComponent) now can subscribe to this event and dispatch the action to the store.

We are going to see later the app component and how to set the reset Input.

Update Todos Actions

Let’s create in our reducer file the new actions.

The only thing that the addTodo action need is the todo title.

Update Todos Service

Now we need to add an addTodo method to our todos service.

Again, we are just faking an HTTP request with the timer operator from Rx and returning dummy data with the same title. ( in this case we are faking POST request )

Update Todos Effects

The same process again, call your side effects and return a new action.

Update Todos Reducer

I am skipping on the errors and the loading indicator parts because it should be straightforward to you by now.

Now let’s see our smart component (AppComponent).

The first thing we’ve added is the addTodo method that just dispatches the ADD_TODO action.

The second thing is, remember that we need to reset our form control when the ADD_TODO action completes?

The beauty in ngrx/effects is that you can inject the effects to your component and subscribe to them.

In our case, we need to subscribe to the addTodo$ effect, and we only care about the ADD_TODO_SUCCESS action. So now we can use our reset Input like this:

If you are asking yourself what the addTodo$ effect returns, it just returns an observable with the new action.

My initial intent was also to write the part of the toggle completed status, but I think it’s pointless now.

As you see usually is the same process.

1. Emit a toggle event when the user clicks on the todo.
2. Create the new actions and update your reducer for this new case.
3. Create toggleTodo$ side effect.
4. Dispatch the action from your smart component.

If you have difficulty with something leave me a comment and I’ll be happy to help.

In the next part, we will learn how to create the filters. ( It will be more interesting )

Follow me on Medium or Twitter to read more about Angular, Vue and JS!

The source code.