context
I'm rendering a form with a dynamic set of text elements. I've normalised my state using normalizr principles 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;
you can make use of immutability-helper npm package and update your values in your reducer
import update from 'immutability-helper';
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:
return update(state, {
data : {
elements: {
[action.id]: {
value: {
$set: 'new value'
}
}
}
}
})
default:
return state;
}
}
export default formReducer;
update()provides simple syntactic sugar around this pattern to make writing this code easier. While the syntax takes a little getting used to (though it's inspired by MongoDB's query language) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
Object.assign only operates one level deep; i.e. it does not recursively clone the entire object tree. So, your top-level object is cloned but it doesn't trigger a rerender since your reducer mutates a value deep in the cloned object.
I would recommend looking into the deep-extend package and updating your state as follows:
import extend from 'deep-extend';
...
return extend(state, {
elements: {
[key]: value
}
});