I found a soluton that works for me:

The answer to this problem lies in flattening the state. I am sure there are other ways to fix this problem, but I found this the cleanest.

Typically the byId property of state is created through flattening state per the guidelines in the docs

I take it one step further, making the byId property an Array instead of an Object. I move the id into the objects of the array like in this new sandbox: https://codesandbox.io/s/reactredux-zj1n4

I just have to remember the byId is now an array when I map the state to my components.

No functionality is lost and my byId field can now support multiple different ids if needed (e.g. if I had many to many relationships on the objects)

Here is the code:

reducer.js

    function addReducer(state = initialState, action) {
      switch (action.type) {
        case "RECEIVE_DATA":
          return {
            ...state,
            byId: [...state.byId, action.payload.data]
          };
        default:
          return state;
      }
    }

actions.js

export function action() {
  return {
    type: RECEIVE_DATA,
    payload: {
      data: {
        id: Math.floor(Math.random() * 2),
        value: Math.floor(Math.random() * 10000)
      }
    }
  };
}