markdown 动作创作者

Posted 2021-05-05

## Dans actions

```
// todo.actions.ts
import { Action } from '@ngrx/store';

export const ADD_TODO = '[Todo] Add Todo';
export const REMOVE_TODO = '[Todo] Remove Todo';

export class AddTodo implements Action {
  readonly type = ADD_TODO;
  constructor(public payload: Todo) {}
}

export class RemoveTodo implements Action {
  readonly type = REMOVE_TODO;
  constructor(public payload: Todo) {}
}

// exporting a custom type
export type TodoActions = AddTodo | RemoveTodo;
```

// todo.reducers.ts

```
import * as fromActions from './todo.actions';

export interface TodoState {
  loaded: boolean;
  loading: boolean;
  data: Todo[];
}

export const initialState: TodoState = {
  loaded: false,
  loading: false,
  data: [],
};

export function reducer(
  state: TodoState = initialState, 
  action: fromActions.TodoActions`
) {
  switch (action.type) {
    case fromActions.ADD_TODO: {
      const data = [...state.data, action.payload];
      return { ...state, data };
    }

    case fromActions.REMOVE_TODO: {
      const data = state.data.filter(
        todo => todo.label !== action.payload.label
      );
      return { ...state, data };
    }
  }

  return state;
}
```

// todo.component.ts
```
this.store.dispatch(
  fromActions.AddTodo({ label: 'Eat pizza', complete: false })
);
```