Can't update an input value inside specific array item in redux

Question

I am working in a react-native projetc and i don't understand very well Redux. I need help.:D We got it an array of objects like:

lines[
    {"cant":2, "ref":"bar"}, {"cant":5, "ref":"foo"}
]

Every line is a card information. These cards have inputs (cant, ref) to change its values. The entire object is:

obj:{
  "a": '',
  "b": '',
  "lines": [
    {"cant":2, "ref":"bar}",
    {"cant":5, "ref":"foo"}
  ]
}

When user inserts some value in some input it called onChangeText().

    <Input
        placeholder="Cant"
        value={this.props.newOrder.lines[index].cant}
        onChangeText={(text)=> {
            this.props.onChangeCant({"cant":text,"index":index});
        }}
    />

Meanwhile in the Reducer (we use react-addons-update ):

case ON_CHANGE_CANT:
        return update(state, {
          lineas: {
            [action.payload.index]: {
              cant: {$set: action.payload.cant}
            }
          }
        });

Everything is OK except only it updates only one character. For example: Cant: 1. Then input focus is missing. If you type: Cant: 22 . only it updates 2 . Doesn't matter if it types faster. Only update the first character you typing. We suspect the behaviour of Redux is the problem but we don't know why.

We tried to use debounce(lodash) but we have not succeeded

Any idea please?

Thank you so much! and i hope it understands my explanation.

Rockandbit

Answer 1

Just read the react-addons-update docs. You'd want your reducer case to look something like this:

return update(state, {
    lines: {$splice: [[action.payload.index, 1, action.payload.cant]]}
});

But note that action.payload.cant would have to be the whole object you'd like to replace. So either pass that or get it from the state beforehand.