如何将只读方法附加到来自 redux 的对象？答案

【问题标题】：How do I attach readonly-methods to objects from redux?如何将只读方法附加到来自 redux 的对象？
【发布时间】：2019-12-25 01:07:06
【问题描述】：

假设我在 redux 中存储了一个带有名字和姓氏字段的“用户”对象（interface User { firstName : string, lastName : string}，如果我们使用的是打字稿）。一旦我从 redux 中检索到一个用户，假设我想获取用户的全名，计算为${user.firstName} ${user.lastName}。现在，我有一个函数：

function getFullName(user: User) : string { 
  return `${user.firstName} ${user.lastName}`
}

但是，在我的实际应用程序中，我有很多这样的只读函数，并且真的希望有一个我可以调用为user.getFullName() 甚至user.fullName 的方法。这样，我就不必记住导入每个函数，我不必记住哪些是属性，哪些是函数等。

我想我可以通过在我从 redux 获得任何东西时实例化分类对象来做到这一点，并记住在保存到 redux 以转换为普通旧 js 对象时执行 {...user}。然而，这会为 redux 添加更多样板，尤其是使用 typescript。

这似乎应该是一个已解决的问题，有没有简单、精简的解决方案？

【问题讨论】：

使用类并将类实例存储在 Redux 中？或者，您有一个公共 API，它在与 redux 存储交互时利用类和（反）序列化为普通旧对象

标签： javascript typescript redux

【解决方案1】：

JS 对象中的成员函数与其他属性相同。所以你可以在User接口上定义成员函数getFullName()，并在initalUserState中定义它。 getFullName() 将在 redux 进程操作后保留。

interface User {
    firstName: string; lastName: string;
    getFullName: () => string;
}

const initalUserState: User = {
    firstName: '',
    lastName: '',
    getFullName () {
        return `${this.firstName} ${this.lastName}`;
    },
}

const reducer: Reducer<User, Action> = (state = initalUserState, action): User => {
    // action processing logic
    return state;
}

扩展语法{ ...state, firstName: action.firstName } 仍然有效，不会覆盖getFullName() 方法。

在组件中你可以使用getFullName()，如下所示

const Cmp1: FC<User> = (user) => <div>{user.getFullName()}</div>

export default connect<User, {}, {}, ApplicationState>
    (state => state.user, null)(Cmp1)

【讨论】：