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

Question

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

问题: 我不想重复 Action 文件，就像我的例子一样 home-todos.actions 和 sport-todos-actions，我想使用相同的 to-dos.action 文件。和相同的 reducer 。

示例: 例如，我编写了一个 todo 应用程序，在此示例中，如果我发送类型为“ADD_TODO_ASYNC”的操作，您会看到问题，它将在 home(effects and reducer) 和 sport(effects and reducer) 中发送

待办事项.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;

运动效果.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(
        ...
    ) { }

}

reducer

function todosReducer(state, action: TodosActionTypes.Actions) {
    switch (action.type) {
        case TodosActionTypes.ADD_TODO_COMPLETE:
            return state;
        default:
            return state;
    }
}

应用程序模块.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

谢谢大家

Answer 1

要理解这个问题，您需要重新思考您的应用架构。 一般来说，可重用的 reducer / Action 是不正确的。

为什么不对？在目前看来，编写可重用的 reducer 和 action，更少的样板文件，而不是“DRY”似乎很棒。以您的应用为例。家庭和运动的“ADD_TO_DO”是平等的。

但在未来会很危险，认为您的老板/客户需要 future 的体育运动 add_to_do。如果您更改可重用 reducer 中的逻辑。你的应用程序会崩溃。 (您可以开始使用 if 语句修补您的可重用 reducer 以使其工作，但如果您的应用程序增长，它将不灵活/可读/维护)。

所以是的，在这种情况下您似乎需要编写 2 个 reducer 和 2 个操作文件。现在是平等的， future 是优势和灵活的。

祝你好运!