javascript - 在 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 组件渲染它。

现在我需要一个函数来给我一个人的“全名”。所以它不仅仅是“名字+姓氏”，而且取决于国家(例如，在中国它是“姓氏+名字”)，所以有一些相对复杂的逻辑，我想将其包装在一个可从任何地方使用的函数中 react 组件。

在 OOP 中，我将创建一个 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>

<小时/>

我们将库文件夹放置在与组件文件夹等相同的级别，但无论什么最适合您都应该这样做。