refactor(general): 💡 change names

Author: NetanelBasal

.prettierignore

@@ -2,3 +2,4 @@
 
 /dist
 /coverage
+*.md

README.md

@@ -24,15 +24,28 @@ import { initEffects } from '@ngneat/effects';
 initEffects();
 ```
 
-Next, we need to define our actions. For example:
+Actions are created by using the `createAction` or `actionsFactory` functions:
 
 ```ts
-import { createAction } from '@ngneat/effects';
+import { actionsFactory, createAction } from '@ngneat/effects';
+
+// todos.actions.ts
+export interface Todo {
+  id: string;
+  name: string;
+}
 
 export const addTodo = createAction('[Todos] Add Todo', props < { title: string });
+
+// Ee recommend using the actions factory to prefix each action for better readability and debug purposes when using redux dev tools
+export const todoActions = actionsFactory('todo');
+
+// We can declare an action by passing it a type and an optional payload. 
+export const loadTodos = todoActions.create('Load Todos')
+export const addTodo   = todoActions.create('Add Todo', props<Todo>())
 ```
 
-Next, we need to define the effects, and register them:
+Next, we need to define the `effects`, and register them:
 
 ```ts
 import { createEffect, registerEffects, ofType } from '@ngneat/effects';
@@ -72,13 +85,10 @@ export function TodosPage() {
   useEffect(() => dispatch(loadTodos()), []);
 
   return (
-    <button onClick = {()
-=>
-  dispatch(addTodo({ title: 'foo' }))
-}>
-  Add
-  < /button>
-)
+    <button onClick = {() => dispatch(addTodo({ title: 'foo' }))}>
+      Add
+    </button>
+  )
 }
 ```
 
@@ -88,90 +98,61 @@ The effects we pass are tied to the component life cycle hook and will be destro
 
 First, install the package: `npm i @ngneat/effects-ng`.
 
-Then we need to register our root effects in our app module.
+Next, create the `effect` provider:
 
 ```ts
-import { TodoEffects } from "todo/todo.effect.ts"
+import { createEffect }  from '@ngneat/effects';
 
-// app.module.ts
-EffectsNgModule.forRoot([TodoEffects])
+@Injectable({ providedIn: 'root' })
+export class TodosEffects {
 
-@NgModule({
-  imports: [
-    EffectsNgModule.forRoot([TodoEffects]),
-  ]
-})
-export class AppModule {
+  constructor(private todosApi: TodosApi) {}
+
+  loadTodos$ = createEffect(actions => 
+    actions.pipe(
+     ofType(loadTodos),
+     switchMap((todo) => this.todosApi.loadTodos())
+    )
+  );
 }
 ```
 
-In order to register lazily loaded effects use the forFeature method.
+Then we need to register our the `effects` in our app module:
 
 ```ts
-import { UserEffects } from "user/user.effect.ts"
+import { EffectsNgModule } from '@ngneat/effects-ng';
+import { TodosEffects } from 'todos/todos.effect.ts';
 
-// lazy.module.ts
 @NgModule({
   imports: [
-    EffectsNgModule.forFeature([UserEffects])
+    EffectsNgModule.forRoot([TodosEffects]),
   ]
 })
-export class LazyModule {
+export class AppModule {
 }
 ```
 
-An injectable effects class holds properties and uses dependency injection as you're familiar from other Angular
-injectable services.
+In order to register lazily loaded effects use the `forFeature` method:
 
 ```ts
-// todo.effect.ts
-@Injectable()
-export class TodoEffects {
-
-  constructor(
-    private todoApiService: TodoApiService
-  ) {
-  }
+import { EffectsNgModule } from '@ngneat/effects-ng';
+import { PostsEffects } from "posts/posts.effect.ts"
 
-  loadTodos = createEffect(actions => actions.pipe(
-    ofType(loadTodos),
-    switchMap((todo) => this.todoApiService.loadTodos()),
-    map(({ todos }) => actions.dispatch(showSnackbar({ message: `Todos loaded.` })))
-  ));
-}
-```
-
-Effects listen to actions that can be triggered by using the actions stream and its dispatch method
-
-```ts
-// todo.action.ts
-export interface Todo {
-  id: string;
-  name: string;
-  status: "not started" | "in progress" | "done"
+@NgModule({
+  imports: [
+    EffectsNgModule.forFeature([PostsEffects])
+  ]
+})
+export class LazyModule {
 }
-
-// we recommend using the actions factory to prefix each action for better readability and debug purposes when using redux dev tools
-const todoActions = actionsFactory("todo")
-
-// we can declare an action by passing it a type and an optional payload. 
-export const loadTodos = todoActions.create("Load Todos")
-export const addTodo   = todoActions.create("Add Todo", props<Todo>())
-
 ```
 
-If we don't need the reactive behavior of effects and we want to call an effect without using actions we can use the
-effect functions as explained [below](#angular-effect-functions).
-
-The actions can be dispatched wherever we have access to the actions stream. Common use cases are dispatching actions in
-components or within other effects
+The actions can be dispatched by injecting the `Actions` provider:
 
 ```ts
-// app.component.ts
 @Component(...)
 export class AppComponent {
-  constructor(private actions: Actions) {
-  }
+  constructor(private actions: Actions) {}
 
   ngOnInit() {
     this.actions.dispatch(loadTodos());
@@ -204,16 +185,12 @@ First, install the package: `npm i @ngneat/effects-hook`.
 We can register the effect in our component, and call it when we need:
 
 ```ts
-import { useComponentEffects$ } from '@ngneat/effects-hooks';
+import { useEffectFn } from '@ngneat/effects-hooks';
 
 function SearchComponent() {
-  const searchTodo = useComponentEffects(searchTodoEffect);
+  const searchTodo = useEffectFn(searchTodoEffect);
 
-  return <input onChange = {({ target: { value } })
-=>
-  searchTodo(value)
-}
-  />
+  return <input onChange = {({ target: { value } }) => searchTodo(value) }/>
 }
 ```
 
@@ -223,25 +200,24 @@ We can also register multiple effects:
 
 ```ts
 function FooComponent() {
-  const [addTodo, updateTodo, deleteTodo] = useComponentEffects([
+  const [addTodo, updateTodo, deleteTodo] = useEffectFn([
     addTodoEffect, updateTodoEffect, deleteTodoEffect
   ]);
 
-  return
-...
+  return ...
 }
 ```
 
 <h3 id="angular-effect-functions">Use with Angular</h3>
 
 First, install the package: `npm i @ngneat/effects-ng`.
 
-Create an effect class, extends the `ComponentEffects` and use the `createEffectFn` to create your effects:
+Create an effect class, extends the `EffectFn` and use the `createEffectFn` to create your effects:
 
 ```ts
-import { ComponentEffects } from '@ngneat/effects-ng';
+import { EffectFn } from '@ngneat/effects-ng';
 
-export class TodosEffects extends ComponentEffects {
+export class TodosEffects extends EffectFn {
 
   searchTodo = this.createEffectFn((searchTerm$: Observable<string>) => {
     return searchTerm$.pipe(

apps/ng-web/src/app/eager/state/foo-effects.ts

@@ -1,9 +1,9 @@
 import { Injectable } from "@angular/core";
 import { Observable, tap } from "rxjs";
-import { ComponentEffects } from '@ngneat/effects-ng';
+import { EffectFn } from '@ngneat/effects-ng';
 
 @Injectable()
-export class Foo extends ComponentEffects {
+export class Foo extends EffectFn {
 
   addTodo = this.createEffectFn((value$: Observable<string>) => {
     return value$.pipe(

apps/react-web/src/app/todos-page/todos-page.tsx

@@ -2,11 +2,11 @@ import { useEffect, useState } from 'react';
 import { addTodo, addTodo$, loadTodos, loadTodos$, searchTodoEffect } from './todos.effects';
 import { loading$, todos$ } from './todos.repository';
 import { dispatch } from '@ngneat/effects';
-import { useComponentEffects, useEffects } from '@ngneat/effect-hooks';
+import { useEffectFn, useEffects } from '@ngneat/effect-hooks';
 import { useObservable } from '@ngneat/use-observable';
 
 function SearchComponent() {
-  const searchTodo = useComponentEffects(searchTodoEffect);
+  const searchTodo = useEffectFn(searchTodoEffect);
 
   return <input onChange={({ target: { value } }) => searchTodo(value)} />
 }

libs/effects-ng/src/index.ts

@@ -1,3 +1,3 @@
 export { EffectsNgModule } from './lib/effects-ng.module';
 export { Actions } from './lib/actions';
-export { ComponentEffects } from './lib/component-effects'
+export { EffectFn } from './lib/effect-fn'

libs/effects-ng/src/lib/component-effects.ts renamed to libs/effects-ng/src/lib/effect-fn.ts

@@ -3,7 +3,7 @@ import { createEffectFn } from "@ngneat/effects";
 import { Observable, Subject } from "rxjs";
 
 @Injectable()
-export class ComponentEffects implements OnDestroy {
+export class EffectFn implements OnDestroy {
   private destroy = new Subject<boolean>();
   private destroy$ = this.destroy.asObservable();
 

libs/hooks/src/index.ts

@@ -1,2 +1,2 @@
 export { useEffects } from './lib/use-effects';
-export { useComponentEffects } from './lib/use-component-effects';
+export { useEffectFn } from './lib/use-effect-fn';

libs/hooks/src/lib/use-component-effects.spec.tsx renamed to libs/hooks/src/lib/use-effect-fn.spec.tsx

@@ -1,10 +1,10 @@
 import { createEffectFn } from '@ngneat/effects';
 import { Observable } from 'rxjs';
 import { finalize, tap } from 'rxjs/operators';
-import { useComponentEffects } from './use-component-effects';
+import { useEffectFn } from './use-effect-fn';
 import { render, fireEvent } from '@testing-library/react';
 
-describe('useComponentEffects', () => {
+describe('useEffectFn', () => {
   const spy = jest.fn();
   const destroySpy = jest.fn();
 
@@ -16,7 +16,7 @@ describe('useComponentEffects', () => {
   });
 
   function SearchComponent() {
-    const searchTodo = useComponentEffects(searchTodoEffect);
+    const searchTodo = useEffectFn(searchTodoEffect);
 
     return <input data-testid="input" onChange={({ target: { value } }) => searchTodo(value)} />
   }

libs/hooks/src/lib/use-component-effects.ts renamed to libs/hooks/src/lib/use-effect-fn.ts

@@ -1,9 +1,9 @@
 import { MonoTypeOperatorFunction, Observable, Subject, takeUntil } from "rxjs";
 import { useRef, useMemo, useEffect } from 'react';
 
-export function useComponentEffects<R extends Effect$[]>(effects: R): ReturnTypes<R>;
-export function useComponentEffects<R extends Effect$>(effect: R): ReturnType<R>;
-export function useComponentEffects(effects: Effect$[] | Effect$): any {
+export function useEffectFn<R extends Effect$[]>(effects: R): ReturnTypes<R>;
+export function useEffectFn<R extends Effect$>(effect: R): ReturnType<R>;
+export function useEffectFn(effects: Effect$[] | Effect$): any {
   const { destroyed } = useUntilDestroyed();
   const result = useRef<any>([]);