如何避免在 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) 它不是 return 我一个商店的数组，但是 return给我一个函数 getUsers(state)。任何想法我应该怎么做？谢谢！

Answer 1

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

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

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

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

这将在假设 getUser return 只是一个 id 的情况下起作用。但顾名思义，它可能 return 整个用户对象？所以仔细检查一下。

如果 users.find 不 return 匹配，则您当前的代码中可能存在运行次错误。我建议像这样清理它：

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

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

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

How do I avoid repeating a code in redux + react. Example inside

reactjs

redux

react-redux

reselect