javascript – ngrx / redux操作上下文的最佳实践

我试图找到这种情况的最佳实践,但我没有找到.

问题：
我不想重复动作文件,就像在我的例子中一样
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.

祝好运！

标签：javascript,typescript,redux,angular,ngrx
来源： https://codeday.me/bug/20190701/1348059.html