Reactjs 如何避免在redux+；中重复代码；反应内例

我在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）。你知道我该怎么做吗？谢谢大家!

@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 || '';
}

• 如果未定义

  （用户| |[]）

  ，则使用空数组，以便始终可以调用

  find

  。我这样做，而不是设置默认值

  users=[]

  ，因为如果可选参数出现在必需参数之前，一些linter会抱怨
• 使用可选链接

  ？。

  仅在找到用户时访问

  名称

• 如果

  name

  为false，则返回空字符串

---

快速猜测：您不应该只传递getUserNameById（函数的实例）而不是调用它，并在运行时将结果传递给createSelectors第二个参数，它会编译为`getUserName=cS（[…]，user.name），尽管我原以为这里编写的代码会出现语法错误，所以Shugswoow，谢谢你的详细回答！这真的很有帮助！