6. Principios SOLID

162KB

Principles_and_Patterns.pdf

PDF

Open

Martin, Robert C. (2000). "Design Principles and Design Patterns"

Single Responsibility Principle

Every element should do exactly one thing

React: Presentation & Container components

Initial code

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users", { method: "GET" })
      .then((response) => response.json())
      .then(setUsers);
  }, []);

  return (
    <section>
      <h1>Users: </h1>
      <ul>
        {users.map((user) => (
          <li>{user.username}</li>
        ))}
      </ul>
    </section>
  );
}

=> Presentation component

function Users({ users }) {
  return (
    <section>
      <h1>Users: </h1>
      <ul>
        {users.map((user) => (
          <li key={`user-${user.username}`}>{user.username}</li>
        ))}
      </ul>
    </section>
  );
}

=> Container component

function UsersContainer() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users", { method: "GET" })
      .then((response) => response.json())
      .then(setUsers);
  }, []);

  return <Users users={users} />;
}

Open/Close Principle

You should be able to add functionality to some module, without modifying its existing source code

Composición >>> Herencia

React: división en componentes

Container component

function UsersContainer() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users", { method: "GET" })
      .then((response) => response.json())
      .then(setUsers);
  }, []);

  return <Users users={users} />;
}

=> composition component

function Users({ users }) {
  return (
    <section>
      <h1>Users: </h1>
      <ul>
        {users.map((user) => (
          <User user={user} />
        ))}
      </ul>
    </section>
  );
}

function User({ user }) {
  return (
   <article key={`user-${user.username}`} className="user">
      <span>{user.username}</span>
      <div className="user__contact-info">
        {user.company.name}
        {user.email}
      </div>
    </article>
  );
}

Substitution Principle (Liskov)

Cualquier objeto se tiene que poder sustituir por un objeto que sea un subconjunto

React: Las propiedades de los components representan su API

function Users({ users }) {
  return (
    <section>
      <h1>Users: </h1>
      <ul>
        {users.map((user) => (
-          <User user={user} />
+          <UserCard user={user} />
        ))}
      </ul>
    </section>
  );
}

Interface Segregation Principle

No fuerces cumplir interfaces que no se usen.

React: Lista solo las propiedades necesarias (no dependas de propiedades que no necesitas)

-function UserCard({ user }) {
+function UserCard({ username, company, email }) {

Dependency Inversion Principle

Interacciona con los detalles usando abstracciones

React: Extracción a custom hooks

custom hook

function useUsers() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    let isSubscribed = true;

    api.fetchUsers().then((users) => {
      if (isSubscribed) {
        setUsers(users);
      }
    });

    const cleanUp = () => {
      isSubscribed = false;
    };
    return cleanUp;
  }, []);

  return { users };
}

function UsersContainer() {
  const { users } = useUsers();

  return <Users users={users} />;
}

container component: no entra en el detalle

function UsersContainer() {
  const { users } = useUsers();

  return <Users users={users} />;
}