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

现在我需要一个函数来提供一个人的 "full name"。所以它不只是 "first_name + last_name" 而是取决于国家（例如，在中国它会是 "last_name + first_name"），所以有一些相对复杂的逻辑，我想把它包装在一个可以从任何地方使用的函数中反应组件。

在 OOP 中，我会创建一个 Person::getFullName() 方法来提供这些信息。然而，state 对象是一个 "dumb" 对象，其中子对象没有任何专门的方法。

那么一般来说，在 React-Redux 中管理它的推荐方法是什么？我所能想到的就是创建一个全局函数，例如 user_getFullName(user) ，它需要一个用户和 return 全名，但这不是很优雅。有什么建议吗？

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>

---

我们将 library 文件夹与 components 文件夹等放在同一层级，但您应该选择最适合您的文件夹。

Answer 2

首先，Redux has no opinion on the file structure of your application.

一些著名的样板项目将代码放入 utils/ 文件夹中：

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

示例文件夹结构：

• 源/
  • 组件/
    • ...
  • 减速机/
    • ...
  • 实用程序/
    • ...