Где разместить служебные функции в приложении React-Redux?

Question

В приложении React-Redux у меня есть такое состояние:

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

который я рендеринг с использованием компонента React.

Теперь мне нужна функция, которая дает мне "полное имя" человека. Так что это не просто "first_name + last_name", но это зависит от страны (например, это будет "last_name + first_name" в Китае), поэтому есть некоторая относительно сложная логика, которую я хотел бы заключить в функцию, которую можно использовать из любого Реагировать компонент.

В ООП я бы создал Person::getFullName() метод, который дал бы мне эту информацию. Тем не менее state Объект является "тупым", где у подобъектов нет специальных методов.

Итак, каков рекомендуемый способ управления этим в React-Redux в целом? Все, что я могу думать, это создать глобальную функцию, такую ​​как user_getFullName(user) что бы взять пользователя и вернуть полное имя, но это не очень элегантно. Любое предложение?

Answer 1

Я следую подходу создания библиотек для подобных случаев в моих приложениях, и пока это работает довольно хорошо для меня.

В этом случае я бы создал новый модуль, например {ComponentRoot}/lib/user.js который экспортирует функцию getFullName(user) или возможно getFullName(firstName, lastName, country)в зависимости от обстоятельств.

Теперь это просто вопрос импорта модуля, в котором вам требуются функциональные возможности, а глобальные функции не требуются:

import React from 'react'
import {getFullName} from '../lib/user'

const Title = ({user}) =>
    <div>
        {getFullName(user)}
    </div>

---

Мы помещаем нашу библиотечную папку на тот же уровень, что и папка компонентов и т. Д., Но все, что работает лучше для вас, следует делать.

Answer 2

Прежде всего, у Redux нет мнения о файловой структуре вашего приложения.

Некоторые известные шаблонные проекты помещают код в utils/ папка:

• реагируют-шаблонный
• реагируют-Redux-универсальный-горячей пример
• реагирую-рогатка
• электронно-реагировать-шаблонный

Пример структуры папок:

• SRC /
  • компоненты/
    • ...
  • редукторы /
    • ...
  • Utils /
    • ...