在Redux还原器中更新状态的问题

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 状态，在还原器完成"事情"之后，应该看起来如下：

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],
    },
};

每次还原器运行时，返回结果是一个对象数组，其中每个ID从usersForTeams中的匹配键匹配userId。

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

[{ 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;
};