I am trying to find the best practice for this scenario, but I am not finding.
Problem:
I do not want to repeat the action files, as in my home-todos.actions and sport-todos-actions example, I want to use the same to-dos.action file. and the same gearbox.
Example:
For example, I am writing a todo application, in this example you can see the problem if I sent an action with the type "ADD_TODO_ASYNC", which sends to the house (effects and gear), and sports (effects and gear)
todos.actions.ts
const ADD_TODO_ASYNC = 'ADD TODO ASYNC';
const ADD_TODO_COMPLETE = 'ADD TODO COMPLETE';
const ADD_TODO_FAILD = 'AD TODO FAILD';
class addTodoComplete {
type = ADD_TODO_COMPLETE;
}
class addTodoFaild {
type = ADD_TODO_COMPLETE;
}
export type Actions = addTodoComplete | addTodoFaild;
sport.effects.ts
@Injectable()
export class SportTodosService {
@Effect() ADD_TODO_ASYNC$ = this.actions$.ofType(TodosActionTypes.ADD_TODO_ASYNC)
.map(toPayload)
.swithMap( (todo: Todo) => this.api.addTodo(todo))
.map((todo: Todo) => TodosActionTypes.addTodoComplete(todo))
constructor(
private actions$: Actions,
private api: api
) { }
}
home.effects.ts
export class HomeTodosService {
@Effect() ADD_TODO_ASYNC$ = this.actions$.ofType(TodosActionTypes.ADD_TODO_ASYNC)
...
constructor(
...
) { }
}
Gearbox
function todosReducer(state, action: TodosActionTypes.Actions) {
switch (action.type) {
case TodosActionTypes.ADD_TODO_COMPLETE:
return state;
default:
return state;
}
}
app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
StoreModule.forRoot({
sport: todosReducer,
home: todosReducer,
}),
EffectsModule.forRoot([
SportTodosService
HomeTodosService,
])
],
providers: [
api
],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm trying to figure out what works best for this scenario? write actions with context, for example "HOME_ADD_TODO" and "SPORT_ADD_TODO"?
or have an official path?
, , reducex ngrx