在同一動作中的減速器中分離關注點

我想要實現以下標準化狀態形狀。在同一動作中的減速器中分離關注點

{ 
    userAccounts: { 
     byId: { 
      "1234": { 
       "id": "1234", 
       "name": "Obi-wan", 
       "gender": "Male", 
       "age": 40 
      }, 
      "4321": { 
       "id": "4321", 
       "name": "Padme", 
       "gender": "Female", 
       "age": 26 
      }, 
      ... 
     }, 
     allIds: ["1234", "4321", ...] 
    } 
}

這是獲取數據以獲取用戶帳戶的操作。

export const getAccounts =() => { 
    return (dispatch) => { 
    dispatch({type: GET_ACCOUNTS_REQUEST}); 
    return API.getAccountsList(session).then(
     (response) => { 
     dispatch({ 
      type: GET_ACCOUNTS_SUCCESS, 
      payload: response 
     }) 
     }, 
     (error) => { 
     ... 
     } 
    ) 
    }; 
};

有效負載包含一個稱爲帳戶的密鑰，並且此密鑰包含其他不相關字段中的數組。

payload: { 
    accounts: [ { ... }, { ... } ], 
    ... 
}

我的reducer等待操作GET_ACCOUNTS_SUCCESS並使用combineReducers。

[GET_USERS_SUCCESS]: (state, action) => { 
    return combineReducers({ 
     byId, 
     allIds 
    }); 
}

我目前執行的減速是這樣的：

const byId = (state, action) => { 
    const { accounts } = action.payload; 
    const nextState = { 
    byId: {}, 
    allIds: [] 
    }; 
    accounts.map(account => { 
    nextState.byId[account.id] = { 
     ...account 
    }; 
    nextState.allIds = [ 
     ...nextState.allIds, 
     account.id 
    ] 
    }); 
    return nextState; 
};

我想單獨這個異徑成兩個具有的避免做兩個地圖的關注更好的分離。

有什麼想法？

來源

2017-05-12 Ionthas

您可以創建兩個新減速器，用於偵聽由GET_ACCOUNTS_SUCCESS動作分派的兩個新動作SET_ACCOUNT_BY_ID和SET_ACCOUNT_BY_ALL_IDS（作爲示例）。分派這兩個動作時，您只能將所需的數據傳遞給它們。

來源

2017-05-12 08:12:35 Bhargav

您提出的解決方案將生成兩個呈現器，如果可能，我想避免它。我更感興趣的是改進byId reducer的質量，只保留一種動作類型。 – Ionthas

另一種方法是在有效負載的不同部分上運行2個獨立的功能，並從減速器調用它。這將把減速器的邏輯轉換爲可單獨測試的功能。 – Bhargav

在同一動作中的減速器中分離關注點

回答

相關問題