在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"),所以有一些相对复杂的逻辑,我想把它包装在一个可以从任何地方使用的函数中反应组件.

在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对您的应用程序的文件结构没有意见.

一些着名的样板项目将代码放入一个utils/文件夹:

• 反应-样板
• 反应-终极版的通用-热示例
• 反应-弹弓
• 电子反应-样板

示例文件夹结构:

• SRC /
  • 组件/
    • ...
  • 减速机/
    • ...
  • utils的/
    • ...