我试图找到这种情况的最佳实践,但我没有找到.
问题:
我不想重复动作文件,就像在我的例子中一样
home-todos.actions和sport-todos-actions,我想使用相同的to-dos.action文件.和相同的减速机.
例:
我编写了一个todo应用程序,例如,在这个例子中你可以看到问题,如果我发送一个类型为’ADD_TODO_ASYNC’的动作它将在家中发送(效果和减速器)和运动(效果和减速器)
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(
...
) { }
}
减速器
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 { }
我试着了解这种情况的最佳做法是什么?
使用’HOME_ADD_TODO’和& ‘SPORT_ADD_TODO’?
还是有官方的方式?
如果您知道解决方案,请不要关心解决方案是针对redux还是ngrx
谢谢大家
解决方法:
要了解这个问题,您需要再次考虑您的应用程序架构.
通常可重复使用的减速器/动作是不正确的.
为什么不对?在目前的观点中,编写可重复使用的减速器和动作,更少的样板,而不是“干”似乎很棒.在你的应用程序的示例中.家庭和运动的“ADD_TO_DO”是平等的.
但是在未来它将是危险的,认为你的老板/客户需要未来的体育add_to_do.如果您更改可重复使用的减速器中的逻辑.你的应用程序将破产. (您可以使用if语句开始修补可重复使用的reducer以使其正常工作,但如果您的应用程序增长,它将不灵活/可读/维护).
所以是的,在这种情况下你需要写2个减速器和2个动作文件.在目前它填补相同,但在未来它将是优势和flexibale.
祝好运!