如何避免在 redux + react 中重复代码。里面的例子答案

【问题标题】：How do I avoid repeating a code in redux + react. Example inside如何避免在 redux + react 中重复代码。里面的例子
【发布时间】：2021-03-17 20:26:55
【问题描述】：

我在 rootReducer 中有 redux 选择器：

export const getUser = (state) => fromUser.userGetter(state.user);
export const getUsers = (state) => fromUsers.getUsers(state.users);

// this one is just a function where 1st parameter is array, 2nd is string of ID
export const getUserNameById = (users, id) => {
    let user = ''

    if(users)
        user = users.find(user => user._id === id).name
    return user
}

// this one is selector, which does work fine
export const getUserName = createSelector([getUsers, getUser], (users, id) => {
    let user = ''

    if(users)
        user = users.find(user => user._id === id).name
    return user
});

但是当我尝试这样做以保存代码行时：

export const getUserName = createSelector([getUsers, getUser], getUserNameById (getUsers, getUser));

它告诉我 getUsers.find 不是一个数组，实际上当我使用 console.log(getUser) 时它不会从商店返回一个数组，而是返回一个函数 getUsers(state)。有什么想法我应该怎么做？谢谢！

【问题讨论】：

快速猜测：你不应该只是传递 getUserNameById（函数的实例）而不是调用它并将结果传递给 createSelectors 第二个参数运行时，它编译为 `getUserName = cS([ ...], user.name) 虽然，我会认为这里写的代码会是一个语法错误，所以 shrugs

标签： reactjs redux react-redux reselect

【解决方案1】：

@FrozenKiwi 是正确的，您只需要传递函数而不是调用它。

export const getUserName = createSelector([getUsers, getUser], getUserNameById);

在运行时，作为第二个参数传递的函数将使用第一个参数的选择器选择的值调用。创建的选择器基本上是这样的，但是带有记忆：

const getUserName = (state) => getUserNameById(getUsers(state), getUser(state));

假设getUser 只返回一个id，这将起作用。但是这个名字暗示它可能会返回一个完整的用户对象？所以仔细检查一下。

如果users.find 未返回匹配项，则当前代码中可能存在运行时错误。我建议像这样清理它：

export const getUserNameById = (users, id) => {
    return (users || []).find( user => user._id === id)?.name || '';
}

如果未定义(users || [])，则使用空数组，以便您始终可以调用find。我这样做而不是设置默认值 users = []，因为如果可选参数出现在必需参数之前，一些 linter 会抱怨。
仅在找到用户时才使用可选链接 ?. 访问 name
如果name 为假，则返回一个空字符串

【讨论】：

哇，谢谢你的详细解答！真的很有帮助！