State and Store in frontend codebases - Redux example - App

App.js

import React from "react";
import { useDispatch, useSelector } from "react-redux";

import { getUsers } from "./selectors";
import { createUser } from "./actionCreators";

import Users from "./components/Users";
import UserForm from "./components/UserForm";

export default function App() {
  const dispatch = useDispatch();
  const users = useSelector(getUsers);

  console.log({ users });

  const handleFormSubmission = ({ firstName, lastName, picture }) => {
    if (firstName && lastName) {
      dispatch(createUser(firstName, lastName, picture));
    }
  };

  return (
    <>
      <Users users={users} />
      <UserForm onSubmit={handleFormSubmission} />
    </>
  );
}