Где включить функции утилиты в приложении React-Redux?

В приложении 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), которая возьмет пользователя и вернет полное имя, но это не очень элегантно. Любое предложение?

Ответы

Ответ 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>

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