reactjs - Redux store updates everything even if I just update a nested attribute?

Question

In my application, the user should have the possibility to edit his name. I thought about having his initial name as the default value of useState(). This works perfectly - the name is also updated as well.

function EditName(props) {
    const { navigation, dispatch, initFirstName } = props;

    const [text, setText] = useState(initFirstName);

    return (
      <>
        <Button title="Save" onPress={() => dispatch(updateFirstName(text))} />
        <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
          onChangeText={(inp) => setText(inp)}
          value={text}
        />
      </>

    )


}

function mapStateToProps(state) {
  return (
    {
      initFirstName: state.user.data.firstName,
    }
  );
}

export default connect(mapStateToProps)(EditName);

But now I came across a problem if the user clicks on the save button and dispatch(updateFirstName(text)) is handled. text is overwriten by initFirstName again.

My Redux (toolkit) store is structured as follows:

{
  data: {
    firstName: "Test"
  },
  updateFirstName: {
   pending: null,
   error: null,
  },    
}

The updateFirstName(text) method dispatches an action that sets state.updateFirstName.pending = true;. If I leave this out - everything works.

So I guess that a new reference to the store (state) is created and React thinks: "Oh - I got a new initFirstName" (beside it's still the same because the update hasn't happened yet).

What would be a better way to do this? What's a solution for this problem?

question from:https://stackoverflow.com/questions/65870537/redux-store-updates-everything-even-if-i-just-update-a-nested-attribute

Answer 1

Maybe try to create a function that will be called instead of assigning onPress an arrow function. Basically, the function will be called with the initial value of text.

Make sure you use the current value of text, try this:

const saveHandler = () => {
    dispatch(updateFirstName(text))
}
...
<Button title="Save" onPress={saveHandler} />