How to merge updates into normalized redux state

Question

I just start using normalizr to manage my state. I've gotten to the point where the below code updates the needed objects but I haven't been able to merge them back into the normalized state in a clean, dry way. What is the preferred way of doing this?

Pardon my noobness and thank you for your time.

// normalized state
{
  "entities": {
    "items": {
      "1": {
        "id": 1,
        "title": "Item 1",
      },
      "2": {
        "id": 2,
        "title": "Item 2",
      },
      "3": {
        "id": 3,
        "title": "Item 3",
      },
    },
    "groups": {
      "20": {
        "id": 20,
        "title": "Group 1",
        "items": [ 1, 2 ]
      },
      "21": {
        "id": 21,
        "title": "Group 2",
        "items": [ 3 ]
      }
    }
  },
  "result": [ 20, 21 ]
}

// actions
export const addItem = values => ({
    type: ADD_ITEM,
    payload: {...values, itemID: uuid.v1() }
    // values come from a form
})

// reducer
const items = (state, action) => {
    switch(action.type) {
        case ADD_ITEM:
            let { items } = state.entities;
            let { itemID } = action.payload;

            return {
                ...items,
                [itemID]: {
                    id: itemID,
                    ...item,
                    subItems:[]
                }
            }
        default:
            return state;
    }
}
const groups = (state = initialState, action) => {
    switch(action.type) {
        case ADD_ITEM:
            let { payload } = action;
            let { groupID, itemID } = payload; // GroupID comes from form submit
            let { groups } = state.entities;

            return {
                ...groups,
                [groupID]: [
                    ...groups[groupID],
                    groups[groupID].items = [
                        ...groups[groupID].items,
                        itemID
                    ]
                ]
            }
        default:
            return state;
    }
}

export default groups;

Tibold

Have you looked at the redux example provided by normalizr? github.com/paularmstrong/normalizr/tree/master/examples/redux/… Every use-case is going to be different, so it's hard to give a straight answer. – Patino

@PaulArmstrong I have, but I don't understand how to expand upon it for CRUD kind of actions. I guess what I can't get my head around is: each reducer is acting on an object within entities. When all the reducing is done, how do we merge those objects back into the normalized state { entities: ..., result: [] }? – Tibold

Answer 1

You have to use combine reducer to join all those entities in one state. code like below :

import user from './user';
import contacts from './contacts';
import activeUser from './activeUser';
import messages from './messages';
import {combineReducers} from 'redux';
import typing from './typing';


export default combineReducers({
    user,
    contacts,
    activeUser,
    messages,
    typing
});

Check out complete code here

Plotinus