在redux reducer

Question

我有以下调度操作：

export function fetchUsersForTeam() {
    return {
        type: 'FETCH_USERS_FOR_TEAM__RESOLVED',
        teamId: 123,
        responseData: [
            { userId: 1, name: 'Alice' },
            { userId: 2, name: 'Bob' },
            { userId: 3, name: 'Chris' }, // This is new! "Christopher" is now "Chris"
        ],
    };
};

这是我的减速机：

import _ from 'lodash';

function getUserById(users, id) {
    return _.find(users, {userId: id});
}

const userServiceReducer = (state, action) => {
    if (action.type === 'FETCH_USERS_FOR_TEAM__RESOLVED') {
        const userIds = state.usersForTeams[action.teamId];
        const data = action.userData;
        const result = userIds.map(idx => ({
            ...getUserById(state.userData, idx),
            userData: getUserById(action.responseData, idx),
        }));
        console.log(result);

        return result;
    }

    return state;
};

export default userServiceReducer;

这是初始状态：

const initState = {
    userData: {
        1: { userId: 1, name: 'Alice' },
        3: { userId: 3, name: 'Christopher' },
        4: { userId: 4, name: 'Dave' },
        5: { userId: 5, name: 'Eliza' },
    },
    usersForTeams: {
        123: [1, 3],
        456: [3, 4, 5],
    },
};

new 状态，在reducer完成它的'之后，应该如下所示：

const newState = {
    userData: {
        1: { userId: 1, name: 'Alice' },
        3: { userId: 3, name: 'Chris' },
        4: { userId: 4, name: 'Dave' },
        5: { userId: 5, name: 'Eliza' },
    },
    usersForTeams: {
        123: [1, 3],
        456: [3, 4, 5],
    },
};

每次reducer运行时，返回结果都是一个对象数组，其中每个id与userId中匹配键中的usersForTeams匹配。

在上面的例子中，我的输出是：

[{ userId: 1, name: 'Alice' },
{ userId: 3, name: 'Christopher' },]

Answer 1

您的错误是您没有将新的userData合并到旧状态。 尝试这样的事情。

function getUserById(users, id) {
    return _.find(users, user => user.userId === id);
}

const userServiceReducer = (state, action) => {
    if (action.type === 'FETCH_USERS_FOR_TEAM__RESOLVED') {
        const userIds = state.usersForTeams[action.teamId];
        const data = action.userData;
        const newUserData = userIds.map(idx => ({
            ...getUserById(state.userData, idx),
            userData: getUserById(action.responseData, idx),
        }));

        return _.merge({}, state, {userData: newUserData});
    }

    return state;
};