**context**

I'm rendering a form with a dynamic set of text elements. I've normalised my state using [normalizr principles](https://github.com/paularmstrong/normalizr) so there is an array of elementIds and an object containing the element properties referenced by the elementIds (see initial state in code sample below).

**aim**

My aim is simply for the two rendered elements to be editable. I'm successfully dispatching an action CHANGE\_ELEMENT\_VALUE to my store using an onChange callback, and action.id (referencing the id of the changed element) and action.value (the new value) are available in the reducer (see code below).

**problem**

My problem is that the text fields aren't changing when I type, even though I can see state changing using the devtools redux extension. My understanding is that react is not recognising a state change because the change is deep in state, and I'm not successfully creating a new state object, I'm probably referencing old instances somehow.

**reducer code**

Below is my bungled attempt to force a new state object. I'm assuming it's not working because my components are not being re-rendered. It also seems very inelegant.

```
let initialState = {
    isLoading: false,
    data: {
        elementIds: ['name', 'email'],
        elements: {
            'name': {'id': 'name', 'value':'ben'},
            'email': {'id':'email', 'value':'ben@test.com'},
        },
    },
    error: false
}

function formReducer(state = initialState, action = null) {
    switch(action.type) {
        case types.CHANGE_ELEMENT_VALUE:
            let newData = Object.assign(state.data)
            newData.elements[action.id].value = action.value
            return {...state, data: newData}

        default:
            return state;
    }
}

export default formReducer;

```