App Frameworks Architecting a React Application

StarWarsCharacters-MultipleResponsibilities.jsx

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, Route, history } from "react-router-dom";
import {
  starWarsCharacterSelector,
  starWarsCharactersLoadingSelector
} from "./selectors";
import { actions } from "./selectors";
import Spinner from "./Spinner";
import Modal from "./Modal";
import css from "./css";

export const StarWarsCharacters = () => {
  const characters = useSelector(starWarsCharacterSelector);
  const loading = useSelector(starWarsCharactersLoadingSelector);
  const dispatch = useDispatch();
  const [newCharacterFormValues, setNewCharacterFormValues] = useState({
    name: "",
    age: 0,
    isJedi: false
  });

  async function handleSubmit() {
    await dispatch(actions.createCharacter(newCharacterFormValues));
    history.back();
  }

  if (!characters) dispatch(actions.getCharacters());

  if (loading) return <Spinner />;

  return (
    <div className={css.wrapper}>
      <ul>
        {characters.map((c) => (
          <li>
            {c.name} - {c.age} - {c.isJedi}
          </li>
        ))}
      </ul>
      <div className={css.actions}>
        <Link to="create">Create Character</Link>
      </div>
      <Route
        exact="characters/create"
        render={() => (
          <Modal>
            <form onSubmit={handleSubmit}>
              <input
                value={newCharacterFormValues.name}
                onChange={(e) =>
                  setNewCharacterFormValues((v) => ({
                    ...v,
                    name: e.target.value
                  }))
                }
              />
              <input
                value={newCharacterFormValues.age}
                onChange={(e) =>
                  setNewCharacterFormValues((v) => ({
                    ...v,
                    age: e.target.value
                  }))
                }
              />
              <input
                checked={newCharacterFormValues.isJedi}
                type="checkbox"
                onChange={(e) =>
                  setNewCharacterFormValues((v) => ({
                    ...v,
                    isJedi: e.target.value
                  }))
                }
              />
              <button type="submit">Create</button>
            </form>
          </Modal>
        )}
      />
    </div>
  );
};