New Architecture for common Events situations:

[alacret]

We are taking a review of the patterns implemented to solve common situations.

Purpose

• Establish common solutions to common situations in React Projects.
• Improve the current solutions by making them more effective: Easy to build and read, faster, etc

General Constraints:

• All changes to the state of the application must be done by an Action Flux.
• An Action has to be complete:

1. permission,
2. validations,
3. business logic,
4. events (if any),
5. reusable (it has to be usable for the same scenario)
6. composable (other actions may used)

USE CASES:

1. Simple fetching

Description:

In this scenario, we need to fetch data only once. An example of this can be form data, data that is only fetched once for the view to render.

Solutions

Current Solution:

events

const SuccessEvent = createEvent();
const ErrorEvent = createEvent();

action

const fetchUsers = (someId: int, dispatch = true): Promise<UsersList> => {
	// permissions
    // validations

    let response;
    try{
        response = fetchResource();
    }catch(e){
		dispatch && ErrorEvent.dispatch(e);
        throw e;
    }
	dispatch && SuccessEvent.dispatch(response);
    return response;
}

Component

const Component = (): React<Component> => {
	const [users,setUsers] = useState(SuccessEvent.get());
	const [loading,setLoading] = useState(true);

	useEffect(()=> {
		fetchUsers();
	}, []);
	
	useSubscription(SuccessEvent, (users)=>{
		setLoading(false);
		setUsers(users);
	});
	
	useSubscription(ErrorEvent, (e)=>{
		setLoading(false);
		onError(e);
	});
	
	render ();
}

Known problems:

1. Boilerplate for the use of success and error events.
2. The dispatch parameter is required when multiple mounted components depend on the event.

Alternative Solution 1 (@jesusrodrz )

The use of a hook that handles the 3 states of the fetch.

action

const fetchUsers = (someId: int, dispatch = true): Promise<UsersList> => {
	// permissions
    // validations

    let response;
    try{
        response = fetchResource();
    }catch(e){
		dispatch && ErrorEvent.dispatch(e); // OPTIONAL
        throw e;
    }
	dispatch && SuccessEvent.dispatch(response); // OPTIONAL
    return response;
}

Component

const Component = (): React<Component> => {
	const [users,loading,error] = usePromise(()=> fetchUsers(SuccessEvent.get()));

	if (error) onError(error);

	render ();
}

Comments:

@alacret this seems like a pretty reduction of the code required to use the actions/events

Alternative Solution 2 (@jesusrodrz )

TO-DO: @jesusrodrz

Comments:

2. Fetching with dependencies

Description:

In this scenario, we need to fetch data depending on changes in the component. An example of this can be a ListView with filters and conditions.

Solutions

Current Solution:

events

const SuccessEvent = createEvent();
const ErrorEvent = createEvent();

action

const fetchUsers = (someId: int, dispatch = true): Promise<UsersList> => {
	// permissions
    // validations

    let response;
    try{
        response = fetchResource();
    }catch(e){
		dispatch && ErrorEvent.dispatch(e);
        throw e;
    }
	dispatch && SuccessEvent.dispatch(response);
    return response;
}

Component

const Component = (): React<Component> => {
	const [users,setUsers] = useState(SuccessEvent.get());
	const [filter,setFilter] = useState(0);
	const [loading,setLoading] = useState(true);

	useEffect(()=> {
		fetchUsers(filter);
	}, []);
	
	useSubscription(SuccessEvent, (users)=>{
		setLoading(false);
		setUsers(users);
	});
	
	useSubscription(ErrorEvent, (e)=>{
		setLoading(false);
		onError(e);
	});
	
	render (
		<>
		<SomeComponente onClick={()=> {fetchUsers(filter)}}
		</>
	);
}

Known problems:

1. Boilerplate for the use of success and error events.
2. The dispatch parameter is required when multiple mounted components depend on the event.

Alternative Solution 1 (@jesusrodrz )

TO-DO: @jesusrodrz
ref: #19

Comments:

@alacret it seems that the createAction is really a decorator. Doesn't seems to change much the behavior or improve the use of the dispatch parameter.

Alternative Solution 2 (@alacret )

By extending the current functionality of useSubscription to support multiple events.

Ref: #17

Component

const Component = (): React<Component> => {
	const [users,setUsers] = useState(SuccessEvent.get());
	const [filter,setFilter] = useState(0);
	const [loading,setLoading] = useState(true);

	useEffect(()=> {
		fetchUsers(filter);
	}, []);
	
	useSubscriptions([SuccessEvent, ErroEvent], (users, e)=>{
		setLoading(false);
		setUsers(users)
		if (e) 		onError(e);
		
	});
	
	render (
		<>
		<SomeComponente onClick={()=> {fetchUsers(filter)}}
		</>
	);
}

Comments:

3. Delete / Update Actions

TO-DO: @alacret 

[alacret]

REQUIREMENT:

1. Compose Actions better
2. Turn on and off dispatches on actions
3. Reduce Action boilerplate

import React from "react";
import "./styles.css";

// Alternativa 1
const testAction = async (id, dispatch = true) => {
  // validations
  let result;
  try{
    result = await client.query();
  }catch(e){
    dispatch && Error.dispatch(e)
  }

  try{
    result = await action1(dispatch);
  }catch(e){
    throw e;
  }

  try{
    result = await action2(dispatch);
  }catch(e){
    throw e;
  }

  dispatch && Event.dispatch(e)
  return result;
};

// Alternativa 2
const testService = async (id) => {
  // validations
  let result;
  try{
    result = await client.query();
  }catch(e){
    throw e;
  }

  try{
    result = await service1();
  }catch(e){
    throw e;
  }

  try{
    result = await service2();
  }catch(e){
    throw e;
  }

  return result;
}

const testAction = async (id) => {
  let result;
  try{
    result = await testService();
  }catch(e){
    Error.dispatch(e)
  }
  Event.dispatch(e)
  Event1.dispatch(e)
  Event2.dispatch(e)
  return result;
};


// Alternativa 3
const testService = async (id) => {
  // validations
  let result;
  try{
    result = await client.query();
  }catch(e){
    throw e;
  }

  try{
    result = await service1();
  }catch(e){
    throw e;
  }

  try{
    result = await service2();
  }catch(e){
    throw e;
  }

  return result;
}

const testAction = createAction(testService, [Event, Event1, Event2], [Error]);