javascript - 同一状态的多个 reducer

Question

我有一个 redux 应用程序，我最初从我的服务器异步获取一些消息。

我已将应用程序连接到 signalR 连接，当用户提交消息时，我需要被添加到 Redux 状态。 然而，我似乎无法更新状态，或者至少我做错了。

当服务器向客户端发送新消息时，我调用我的操作 addMessagesSignalR

store.dispatch(addMessagesSignalR(messageFromServer));

Action 是

export function addMessagesSignalR(Obj) {
let messageFromServer = Obj;
   return {
     type: 'FETCH_MESSAGES_SIGNALR',
     payload: messageFromServer
   };
}

我的 reducer 是:

export default function(state = [], action) {
switch(action.type) {
    case 'FETCH_MESSAGES':
        return Object.assign({}, state, action.payload);
    case 'FETCH_MESSAGES_SIGNALR':
        return Object.assign({}, state, action.payload)
}
return state;

我试图将获取的消息的状态与从我的 rootReducer 中的 signalR 收到的消息合并:

messages: fetchMessages

Answer 1

Object.assign用于合并对象，但您的状态似乎是一个数组。您需要使用不同的语法来合并数组。

ES6(使用 spread syntax ):

export default function(state = [], action) {
switch(action.type) {
    case 'FETCH_MESSAGES':
        return [...state, action.payload];
    case 'FETCH_MESSAGES_SIGNALR':
        return [...state, action.payload]
}
return state;

ES5(使用 Array.concat ):

export default function(state = [], action) {
switch(action.type) {
    case 'FETCH_MESSAGES':
        return state.concat(action.payload);
    case 'FETCH_MESSAGES_SIGNALR':
        return state.concat(action.payload)
}
return state;