Updating object's state in redux

Question

What is the best way to update an objects state in redux using one function for multiple inputs?

I have 3 inputs - if possible, I'd like to update corresponding input field to redux object field using one function... or best practice.

// Contact.js

this.state = {
    contactInfo: {
        firstName: '',
        address: '',
        city: '',
    }
}


onChangeInfo = (event, action) => {
    const { dispatch } = this.props;
    const { contactInfo } = this.state;

    // Is this an issue?
    contactInfo[event.target.name] = event.target.value;

    if (action === 'CHANGE') {
        dispatch(updateContactInfo(contactInfo));
        this.setState({ contactInfo });
    } else {
        this.setState({ contactInfo });
    }
}

render() {

const { firstName, address, city } = this.state.contactInfo;

return (
<div>
    <div>
        <input placeholder=" " type="text" name='firstName' value={firstName} onChange={(e) => this.onChangeInfo(e, 'CHANGE')} required id="" />
        <div className="placeholder"><span>First &amp; last name</span></div>
    </div>
    <div>
        <input placeholder=" " type="text" name="address" value={address} onChange={(e) => this.onChangeInfo(e, 'CHANGE')} required id="" />
        <div className="placeholder"><span>Address</span></div>
    </div>
    <div>
        <input placeholder=" " type="text" name="city" value={city} onChange={(e) => this.onChangeInfo(e, 'CHANGE')} required id="" />
        <div className="placeholder"><span>City</span></div>
    </div>
</div>
)}

// Reducer

const initialState = {
    contactInformation: [],
}

export default function (state, action) {
    state = state === undefined ? initialState : state;
    switch (action.type) {
        case 'CONTACT_INFO': {
            state.contactInformation.test.info = payload;
            return Object.assign({}, state, action.payload);
        }
        default: return state;
    }
}

Answer 1

I would suggest you to maintain three different actions as best practise as an action is always a pure function and specific to one particular operation.

export const firstName = (firstName) => ({
    type : 'FIRST_NAME',
    payload : firstName
});

export const address = (address) => ({
    type : 'ADDRESS',
    payload : address
});

export const city = (city) => ({
    type : 'CITY',
    payload : city
});

And, in the reducer, update the store based on action.type

Answer 2

I don't see the point of using setState in this case

this.state = {
    contactInfo: {...this.props}
}

onChangeInfo = ({target: {name, value}}, action) => {
    const { dispatch } = this.props;
    const contactInfo = {[name]: value};

    if (action === 'CHANGE') {
        dispatch(updateContactInfo(contactInfo));
    }
}

Example

const { Component, useState, useEffect } = React;
const { bindActionCreators, combineReducers, createStore, applyMiddleware, compose } = Redux;
const { connect, Provider } = ReactRedux;

const initalState = {
    contactInfo: {
      firstName: '',
      address: '',
      city: ''
  }
}

const reducer = (state = initalState, action) => {
  switch (action.type) {
    case 'CONTACT_INFO': {
      const newState = {
        ...state,
        contactInfo: {
          ...state.contactInfo,
          ...action.payload.contactInfo
        }
      };

      return newState;
    }
    default: return state;
  }
}

const reducers = combineReducers({
  reducer
})

const store = createStore(
  reducers
);


const updateContactInfo = (payload) => ({
  type: 'CONTACT_INFO', payload
})

const mapStateToProps = state => {
  return {
    contactInfo: state.reducer.contactInfo
  }
}

const mapDispatchToProps = dispatch => ({
  updateContactInfo: payload => dispatch(updateContactInfo(payload))
})

class _App extends Component {

  constructor(props) {
    super(props);

    this.state = {...this.props}
    
    this.updateContactInfo = this.props.updateContactInfo;
  }
  
  static getDerivedStateFromProps (props, state) {

    return {...props}
  }
  
  onChangeInfo ({target: {name, value}}, action) {
    const contactInfo = { contactInfo: {[name]: value}};

    if (action === 'CHANGE') {
      this.updateContactInfo(contactInfo);
    }

  }

  render() {
    const { firstName, address, city } = this.state.contactInfo;
    
    return <div>
       <div>
        <input placeholder=" " type="text" name='firstName' value={firstName} onChange={(e) => this.onChangeInfo(e, 'CHANGE')} required id="" />
        <div className="placeholder"><span>First &amp; last name</span></div>
    </div>
    <div>
        <input placeholder=" " type="text" name="address" value={address} onChange={(e) => this.onChangeInfo(e, 'CHANGE')} required id="" />
        <div className="placeholder"><span>Address</span></div>
    </div>
    <div>
        <input placeholder=" " type="text" name="city" value={city} onChange={(e) => this.onChangeInfo(e, 'CHANGE')} required id="" />
        <div className="placeholder"><span>City</span></div>
    </div>
    {JSON.stringify(this.state)}
    </div>
  }
}

const App = connect(mapStateToProps, mapDispatchToProps)(_App)

ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.1/polyfill.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/redux@4.0.5/dist/redux.js"></script>
<script src="https://unpkg.com/react-redux@latest/dist/react-redux.js"></script>
<div id="root"></div>

Answer 3

Great question.

There are a few things I have to point out before I give you an answer. There is generally 2 types of state that exists in any application: long lived state and short lived (a.k.a ephemeral) state. Redux is meant to serve you as a container to place all your long term states that is of general concern to potentially different parts of your application.

With that said, I can see that the only thing you are doing in your app is updating the state with the user input. I bet you then use that state to do something when the user clicks a submit button. If that is your case, the inputs by definition are ephemeral and I would NOT place the input states in Redux at all. Instead, I'd only fire 1 action when the user submits the form.

<form onSubmit={onSubmitHandler}>
  <input name="name" type="text" />
  <input name="hobby" type="text" />
  <button type="submit" />
<form />

------
// this is slight pseudo-code, but hopefully you get the gist
const onSubmitHandler = (event) => {
 const myFields = // get fields from event object.
 dispatch({type: 'SOME-ACTION', fields: myFields})
}

I'd also advise you to consider changing how you are generally modelling your actions. You can watch this video that goes over what I mean.