42

在 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)它将获取用户并返回全名，但这不是很优雅。有什么建议吗？

4

2 回答 2

35

我遵循在我的应用程序中为此类案例创建库的方法，到目前为止，这对我来说效果很好。

在这种情况下，我会创建一个新模块，例如{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>

我们将库文件夹放置在与组件文件夹等相同的级别，但任何最适合您的都应该做。

于 2016-11-29T16:32:23.593 回答
26

首先，Redux 对你的应用程序的文件结构没有意见。

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

示例文件夹结构：

  • 源/
    • 成分/
      • ...
    • 减速机/
      • ...
    • 实用程序/
      • ...
于 2017-06-25T02:31:54.100 回答