如何避免重复redux+react中的代码.里面的例子

Question

我在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(。有什么想法吗？我该怎么办？非常感谢。

Answer 1

@FrozenKiwi认为你只需要传递函数而不是调用它是正确的。

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

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

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

假设CCD_ 1只返回一个CCD_。但是这个名称意味着它可能返回一个完整的用户对象？所以仔细检查一下。

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

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

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