Best practice for ngrx / redux action context

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

+4
3

, . / .

? , , , "". . "ADD_TO_DO" .

, , , / add_to_do. . . ( if, , , //).

, , 2 2 . , flexibale.

!

+1

ngrx.

, . this.actions$ , , . TodosActionTypes.ADD_TODO_ASYNC home.effects.ts sport.effects.ts, .

, , .

- :

todos.actions.ts

abstract class addTodoComplete{
   constructor(readonly type: string){
      //rest of the behavior
   }
}
abstract class addTodoFailed{
   constructor(readonly type: string){
     //rest of the behavior
   }
}

todos.sport-actions.ts

const ADD_TODO = "[Sport] Add Todo";
const ADD_TODO_FAILED = "[Sport] Add Todo Failed";
class sportsAddTodoComplete extends addTodoComplete{
   constructor(){
      super(ADD_TODO);
      //rest of the behavior
   }
}
class sportsAddTodoFailed extends addTodoFailed{
   constructor(){
     super(ADD_TODO_FAILED);
      //rest of the behavior
   }
}

.

, , , SportTodosActionTypes HomeTodosActionTypes.

"copy-paste", .

EDIT:

, , , "-".

sport.reducer.ts

import { todoReducer } from './reducer';

export function sportsTodoReducer(state, action: SportTodoActionTypes.Actions){
   todoReducer(state, action);
}

home.

+1

Action Constants . , , , , , . :

// todos.actions.ts
export const ADD_TODO = '[Home] Add Todo';

, - , .

- , , , , - (, "" "" "):

[Home] Add Todo
[Home] Add Todo Success
[Sport] Add Todo
[Sport] Add Todo Success

Check out SOURCE with more details.

0
source

Source: https://habr.com/ru/post/1691417/


All Articles