creating a redux custom hook reacxt code example

Example 1: using redux with hooks

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { addCount } from "./store/counter/actions";

export const Count = () => {
  const count = useSelector(state => state.counter.count);
  const dispatch = useDispatch();

  return (
    <main>
      <div>Count: {count}</div>
      <button onClick={() => dispatch(addCount())}>Add to count</button>
    </main>
  );
};

Example 2: react custom hooks

import React, { useState } from "react";
 
// custom hooks useForm
const useForm = callback => {
  const [values, setValues] = useState({});
  return {
    values,
    onChange: e => {
      setValues({
        ...values,
        [e.target.name]: e.target.value
      });
    },
    onSubmit: e => {
      e.preventDefault();
      callback();
    }
  };
};
 
// app component
export default function App() {
  const { values, onChange, onSubmit } = useForm(() => {
    console.log(values.username);
    console.log(values.email);
  });
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input type="text" name="username" onChange={onChange} />
        <input type="email" name="email" onChange={onChange} />
        <input type="submit" value="Sing-in" />
      </form>
    </div>
  );
}