Angular com NgRx – Actions, State e Reducer

NgRx is a powerful library for managing state in Angular applications. It provides a way to manage state using a predictable and centralized state container. In this article, we will focus on NgRx actions, state, and reducers.

Actions

Actions in NgRx are used to describe events that occur in an application. They are simple objects that have a type property that identifies the action and an optional payload property that contains any data associated with the action. Actions are typically dispatched from components or services to notify the state management system that something has happened.

State

The state in NgRx represents the current state of the application. It is an immutable data structure that contains all of the application’s data. State is typically divided into feature states, each of which represents a specific area of the application. For example, a todo application might have a todo state that contains all of the todo items, and a filter state that contains the current filter settings.

Reducer

Reducers in NgRx are functions that take the current state and an action, and return a new state. They are responsible for updating the state in response to actions. Reducers are pure functions, meaning they do not have any side effects and always produce the same output for a given input. This makes them easy to test and reason about.

Here is an example of a simple reducer in NgRx:

    
      function todoReducer(state = initialState, action: Action) {
        switch(action.type) {
          case ADD_TODO:
            return {
              ...state,
              todos: [...state.todos, action.payload]
            };
          case TOGGLE_TODO:
            return {
              ...state,
              todos: state.todos.map(todo => {
                if (todo.id === action.payload) {
                  return {
                    ...todo,
                    completed: !todo.completed
                  };
                } else {
                  return todo;
                }
              })
            };
          default:
            return state;
        }
      }
    
  

Actions, state, and reducers are the building blocks of NgRx. By using these concepts, you can create a well-structured and maintainable state management system for your Angular applications.