Cat1.js

const Cat = ({ cat, handleCatUpdateDelete }) => (
  <div>
    <h1>{cat.name}</h1>
    <form method="POST">
      <input type="hidden" name="action-creator" value="update-remove-cat" />
      <input type="hidden" name="id" value={cat.id} />
      <input name="name" defaultValue={cat.name} />
      <inputtype="number" name="age" defaultValue={cat.age} />
      <select name="gender" defaultValue={cat.gender}>
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
      <button name="action" value="update" onClick={handleCatUpdateDelete}>
        Update
      </button>
      <button name="action" value="remove" onClick={handleCatUpdateDelete}>
        Delete
      </button>
    </form>
    <Link to="/">Back</Link>
  </div>
);

export default connect(
  (state, { params }) => ({
    cat: state.cats.cats[params.id],
  }),
  dispatch => ({
    handleCatUpdateDelete: formDispatcher(dispatch),
  })
)(Cat);