Refill input with data cached in a store or localstorage html react

Question

How do i refill input field tags with cached or previous input on page change or reload. Using redux store to cache the input

Answer 1

app.js

import React from 'react';
import { connect } from 'react-redux';
import { updateName, updateEmail, updateAddress, updateContact } from './actions';

class Form extends React.Component {
  handleNameChange = (event) => {
    const name = event.target.value;
    this.props.updateName(name);
  };

  handleEmailChange = (event) => {
    const email = event.target.value;
    this.props.updateEmail(email);
  };

  handleAddressChange = (event) => {
    const address = event.target.value;
    this.props.updateAddress(address);
  };

  handleContactChange = (event) => {
    const contact = event.target.value;
    this.props.updateContact(contact);
  };

  render() {
    return (
      <form>
        <label>Name:</label>
        <input type="text" value={this.props.name} onChange={this.handleNameChange} />

        <label>Email:</label>
        <input type="text" value={this.props.email} onChange={this.handleEmailChange} />

        <label>Address:</label>
        <input type="text" value={this.props.address} onChange={this.handleAddressChange} />

        <label>Contact Number:</label>
        <input type="text" value={this.props.contact} onChange={this.handleContactChange} />
      </form>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    name: state.name,
    email: state.email,
    address: state.address,
    contact: state.contact,
  };
};

const mapDispatchToProps = {
  updateName,
  updateEmail,
  updateAddress,
  updateContact,
};

export default connect(mapStateToProps, mapDispatchToProps)(Form);

action.js

export const updateName = (name) => {
  return {
    type: 'UPDATE_NAME',
    name,
  };
};

export const updateEmail = (email) => {
  return {
    type: 'UPDATE_EMAIL',
    email,
  };
};

export const updateAddress = (address) => {
  return {
    type: 'UPDATE_ADDRESS',
    address,
  };
};

export const updateContact = (contact) => {
  return {
    type: 'UPDATE_CONTACT',
    contact,
  };
};

reducers.js

const initialState = {
  name: '',
  email: '',
  address: '',
  contact: '',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_NAME':
      return {
        ...state,
        name: action.name,
      };
    case 'UPDATE_EMAIL':
      return {
        ...state,
        email: action.email,
      };
    case 'UPDATE_ADDRESS':
      return {
        ...state,
        address: action.address,
      };
    case 'UPDATE_CONTACT':
      return {
        ...state,
        contact: action.contact,
      };
    default:
      return state;
  }
};

export default reducer;