将实用程序函数放在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组件进行渲染。

现在我需要一个能给我＆＃34;全名＆＃34;一个人所以它不只是＆＃34; first_name + last_name＆＃34;但它取决于国家（例如，它将是＆＃34; last_name + first_name＆＃34;在中国），所以有一些相对复杂的逻辑，我想包装在一个可用于任何的函数中反应组件。

在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>

我们将库文件夹放在与组件文件夹等相同的级别上，但是对你来说最适合的是。

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

示例文件夹结构：

• 的src /
  • 组件/
    • ...
  • 减速器/
    • ...
  • 的 utils的/
    • ...