javascript - para - ¿Dónde colocar funciones de utilidad en una aplicación React-Redux?

redux react native

Question

En una aplicación React-Redux, tengo un estado como este:

state = {
items: [
{ id: 1, first_name: "John", last_name: "Smith", country: "us" },
{ id: 2, first_name: "Jinping", last_name: "Xi", country: "cn" },
]
}

el cual renderizo utilizando un componente React.

Ahora necesito una función que me dé el "nombre completo" de una persona. Entonces, no es solo "first_name + last_name" sino que depende del país (por ejemplo, sería "last_name + first_name" en China), así que hay una lógica relativamente compleja, que me gustaría resumir en una función utilizable desde cualquier Reaccionar componente.

En OOP crearía un método Person::getFullName() que me daría esta información. Sin embargo, el objeto de state es uno "tonto" en el que los subobjetos no tienen ningún método especializado.

Entonces, ¿cuál es la forma recomendada de administrar esto en React-Redux en general? Todo lo que puedo pensar es crear una función global como user_getFullName(user) que tomaría un usuario y devolvería el nombre completo, pero eso no es muy elegante. ¿Cualquier sugerencia?

Answer 1

En primer lugar, Redux no tiene opinión sobre la estructura de archivos de su aplicación .

Algunos proyectos famosos colocan el código en una carpeta utils/ :

• react-boilerplate
• react-redux-universal-hot-example
• react-slingshot
• electron-react-boilerplate

Estructura de la carpeta de muestra:

• src /
  • componentes /
    • ...
  • reductores /
    • ...
  • utils /
    • ...

Answer 2

Sigo el enfoque de crear bibliotecas para casos como este en mis aplicaciones, y hasta ahora esto me funciona bastante bien.

En este caso, crearía un nuevo módulo , por ejemplo, {ComponentRoot}/lib/user.js que exporta una función getFullName(user) o posiblemente getFullName(firstName, lastName, country) , dependiendo de las circunstancias.

Ahora solo es cuestión de importar el módulo donde necesita la funcionalidad , no se necesitan funciones globales:

import React from ''react''
import {getFullName} from ''../lib/user''
const Title = ({user}) =>
<div>
{getFullName(user)}
</div>

Ubicamos nuestra carpeta de biblioteca en el mismo nivel que la carpeta de componentes, etc., pero lo que mejor funcione para usted.